Text Input in Game Lab

CS Discoveries Website and Tools How-To
1

Is it possible to get and store text input in Gamelab? A student is seeking similar functionality as getText() in App Lab. Thanks!

2

Hi @sean.glantz,

I do not know of a way to get text input from the user in Gamelab. Or at least an easy way to do it. I tried using the createInput() function from P5 but Gamelab didn’t recognize the function.

Perhaps others have suggestions?
~Michelle

3

Yes there is multiple ways. One easy (will take 1 line, literally) and the other one hard, however better and more customizable.
Way #1: prompt()
You can use the prompt function to get input from the user.
Here’s how:
var answer = prompt("What is 9+10?")
This will make the variable answer what the user has entered. You don’t have to worry about syncing, because it stops all the code when the user is entering something.
There is also promptNum() which is better for numbers, it will re-ask the user if they entered nothing or a number.

The second way is a lot harder, and I can’t just explain it by giving you the code since it may be different, but I can show how it works:
Way #2: creating your own input bar and drawing it with the canvas.
This way is really hard, but it’s more customizable. Don’t do it if you’re a beginner, use prompt() instead.

  1. Create a background for the input bar. You need a small “panel” to write on. You can use rect for this, but a sprite with a custom shapeColor will also do for this. (rect is more customizable by the way, so prioritize it.)
  2. Create a variable to store the text. This can just be a blank string.
  3. Draw the text on the panel. You can decide how you can draw it, but usually you’d go with textAlign(LEFT, CENTER) as that’s what most input bars use.
  4. Debug and see if everything is alright by making the variable with the text something other than just "". Make it “Hello World” instead for example
  5. Create an event to make the user able to type in the input bar. Use keyTyped, here’s how:
    Preferably at the end of your code, write this:
function keyTyped() {
  writtenText = writtenText + key;
}
  1. writtenText is the variable that holds all of the text written in the input. Tell me if this doesn’t work but you still want to do it this way, I will try to find the error.
3 Likes
4

Thank you @IMPixel. I attempted the prompt (pretty easy!) but not the second method. The prompt() was too easy;)

5

Fantastic! Thank you @IMPixel!

@csdmoderator can prompt() be added to the GameLab documentation?

6

There is no built in function to create inputs.
You can try using UI5, which implements inputs without having to use prompts which blocks javascript.
Screen Shot 2022-01-30 at 9.10.25 PM

1 Like
7

@sean.glantz Email your suggestion to support@code.org. That way humans that work on these things will have it as a suggestion. They may not see it here.

1 Like