Text Input Box (again)

Hi there,
I am aware that there are some complete UI frameworks out there (like EmptyKeys). But first, most of them are quite overweight for my requirements and second I have done everything by myself so far and want to stick with that (for learning purposes)
I have implemented Textboxes (show text with Yes/No and Ok Options), Buttons, Drag’n’Drop inventory and so on. The last piece I am missing is a simple “Enter your name” - Textbox.

Allthough I’ve googled some time I am not sure where to start. Some seem to use WPF or Win Forms. But that doesnt seem right for me.

Do you guys have a hint for me where to start? What are my options to implement that?

best regards
Wirago

Depends on how far you wanna go, really.

All you need is an image for the text box, and then a font drawn on top of that with whatever text you receive from the keyboard when selected.

Writing text input is pretty tricky tbh, since there are lots of special cases to handle: caps lock, holding down shift, keys like ctrl+c / ctrl+v, handling numpad, pageup / pagedown, text selection, etc etc…

Since its so tricky, my advice is to use Visual Studio Form Application to create an app with just a text input, and play with it as you develop, so you’ll always have a reference of “how it should be”.

Out of my head, these are the key features you should implement:

  1. getting characters input (obviously).
  2. handling shift and alternative chars / capital letters (caps lock state is less trivial, I’d do it less).
  3. deleting character (note the difference between delete and backspace).
  4. artificial lag after first char, so you won’t get multiple characters all the time (you’ll see what I mean when playing with microsoft’s textbox).

All of the above should be fairly simple to implement. You know how to get keyboard state in MonoGame right? so you can also know if shift is down and map every key to a character (assuming you only support a default keyboard layout).

These are the less critical but still important features:

  1. linebreak.
  2. moving cursor position with arrows (note: linebreak with arrows up-down keys is tricky).
  3. moving cursor position with mouse click.
  4. scrollbar if multiline textbox.

These are a bit trickier. If you didn’t implement something to draw multiline paragraphs you might want to save linebreaks for last.

And these are just nice-to-haves if you have extra time (you won’t :P):

  1. text selection.
  2. copy-paste.
  3. validators.

I wouldn’t bother about these tbh but they are very common.

Sorry that my answer is a bit general, but the question was pretty general as well :slight_smile: So I tried to provide a high-level plan for your dev.

Now you can also ask about more specific parts of the implementation, if you have troubles with them.

2 Likes

Yes GeonBit, that is basically all that needs to be covered. Multiline and linebreaks don’t seem to needed by now, but who knows.
I have checked some other “guidelines” on how to build it up properly and, as you said, I might go with some form application.

I’ve also seen that some GUI features are planned on the MonoGame.Extended project. Those are still WIP, any ideas on how they plan to implement those?

Thank you for yor answers guys :slight_smile:

Hello,

You may want to take a look at Game.Window.TextInput event that does a lot for you:

  • Handling keyboard layouts
  • Handling Shift/Caps lock

However, you’ll need to wire the backspace/delete keys, and use a work-around for other keys (left arrow, right arrow, home, end, insert) as they are not supported through this event (see https://github.com/MonoGame/MonoGame/issues/5808).

You should ask @craftworkgames, he’s behind Extended. Or check out its git.

Wow I didn’t know about this class… Pretty cool. Could have been useful when I implemented my TextBox in GeonBit.UI :slight_smile:

As a point to start I’ve added the textbox I use in my game to a Github repo here:

Feel free to change, ask questions or just tell me that I did it wrong :slight_smile:

There’s always room for improvement.

2 Likes

That is very helpful! Thanks a lot :slight_smile:

So it compiles after initially cloning it yippie

You’re also quite welcome to take whatever code you like out of the TextBox in MonoGame.Extended. I’ve linked to the gui-dialogs branch since that’s the most up to date.

You’re right. It’s still a work in progress but I’ve figured out some of the more fiddly bits like being able to click between each character and so on…

Writing a really good GUI system is quite a lot of work. I come back to it from time to time between other projects but there always seems to be more to do.

How deep you want to go with it really depends on your use cases. A lot of games get away with a handful of simple controls and often don’t need any kind of layout system or drag / resizing behavior. On the flip side, games often have a lot more animations in the UI and such.

If you plan to write an editor or something, that’s a different story. I actually tried to do this with MonoGame.Extended GUI and came to the conclusion that it’s not the right fit for that kind of thing (yet). Lately, I’ve been working on a particle editor by embedding MonoGame inside a WPF app.

1 Like

@throbax
Made some minor modifications to suit my solution better. Works like a charm. Thanks again. Saved a lot of work

@craftworkgames
Yeah, GUI stuff is in my opinion the most time consuming work in correlation to the outcome. Tons of work for some simple buttons :slight_smile:

Hey bro could you add me op skype kanetje.games or check your youtube comments cause i followed your amazing tutorial to make a moving animated 2d sprite but i have like 200 errors so could you maybe give me the project from that video or help me??