Text input using TextBox (and invisible TextBox)

12
  • 51 favourites

Index

Attached Files

The following files have been attached to this tutorial:

.capx

textbox-input.capx

Download now 83.99 KB

Stats

18,278 visits, 40,382 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Not there yet

Ok then. We can type something using our Keyboard. We have great looking Sprite font for our game to display text. And we have that large, glowing orange rectangle, constantly repeating whatever we type and messing up our game screen. Is there a way to hide it somewhere? We don't want anyone to see that thing in our game!

Well... Text box can't be set to be invisible and can't be moved somewhere outside the layout because it will lose focus. No focus, no receiving data from keyboard. We can't even hide it beneath other object!

Fortunately there is one thing we can do. Set a Cascading Style Sheets (CSS) for our Text box. Yeah right... What does it mean for us?

It means we can change how our Text box will look using few simple style properties.

If we magnify Text box object from our game, we can see that it's made of few elements put together.

We will focus on four of them.

Background (white in our example):

Border:

Outline:

Text:

Action part 2

We distinguished all needed elements and it's time to change them.

Let's start with the background. To set a CSS style we need to add an action Set CSS style for Text box.

By default we will see this window with two parameters to setup.

Property name - here we set our parameters like border-color, outline-width...

Value - controls above parameters

For the background we will input these values

background-color - this parameter allows us to modify background color

Different elements have different styles to set up. For example you can set border-color, border width, text-align, background-image etc.

rgba(0,0,0,0) - rgba stand for Red (0-255), Green (0-255), Blue (0-255), Alpha (0-1) and (0,0,0,0) corresponds to them.

This setup means Red = 0, Green = 0, Blue = 0, Alpha = 0 - which gives us black and fully transparent color. In case where Alpha = 0 color really doesn't matter.

We have added an action to our events. Now we need to do same thing for border

outline

and text.

Our event sheet should look like this

Execution part 2

That's it!

We have made invisible Text box for players to type in, with extra colorful sprite font.

And it's all using only few not so difficult actions.

Thanks for reading!

.CAPX

textbox-input.capx

Download now 83.99 KB
  • 4 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • It is good, BUT try to hold Ctrl+A... This will show this terrible small text in the input form to the player because the text will be selected. What we can do with this?

    • I'm from the future and I bring the answer to your question.

      Just position your TextBox in any corner(to the play dont see it) and make the size of the TextBox = 1,1

      Good luck.

  • this was exactly what I needed! Cant wait to build upon this, so grateful :)

  • Excellent! This was great to find out how to also remove the text input cursor. Thank you!