2
\$\begingroup\$

How are simple UI inputs typically handled in 2D mobile games? For example, text input boxes and keyboards.

It seems that many game engines do always have simple UI components. There are obvious challenges in trying to show native components when your game engine has "control" of the application.

I would be interested if anyone can share their design approach. I am most comfortable with cocos2dx and cocossharp. However I am interested in other 2d game engines and possible work arounds for showing text input boxes and keyboards.

\$\endgroup\$
1
  • 2
    \$\begingroup\$ It may not be the best idea but I made all of mine myself from scratch. \$\endgroup\$
    – Lucien
    Jan 14, 2016 at 16:04

2 Answers 2

1
\$\begingroup\$

I can't speak for cocos2d, but since your post has a libgdx tag, I will tell you how libgdx does it.

Libgdx has the scene2d.ui widgets library that includes several useful UI components like Buttons, TextFields, Checkboxes, etc...

The best part about these widgets is that they are implemented completely within the Libgdx library (on top of OpenGL) so any widgets that you use will be cross platform.

I have found that trying to overlay native controls over your game view is quite tricky and the design is brittle. Since Libgdx's ui controls are basically clickable sprites, you can fully integrate them into your game view and make a much more elegant design.

All of these widgets are also very customizable. In Libgdx you can load a skin JSON file where you can point to assets and styles to customize the look of your UI. These skins even support nine patches.

Here's a link to libgdx's scene2d.ui page

I don't know if cocos2d has something similar, but if you decide to go with cocos2d look for a similar ui library. I would definitely go for integrated controls over native controls any day

\$\endgroup\$
-2
\$\begingroup\$

If you are familiar with Android's UI design, and its properties, it is pretty easy to program something for yourself. So if you want to learn to design a pretty UI, study Android. It doesn't matter game UI or not. It's same thing.

I recently made a ListView. I haven't tried it yet. So it is incomplete. But there is some rules, every UI element should obey.
1. Every UI element should inherit same class.
2. Dimensions and position should be dynamic. Also it's properties. For example program your list view for one column or more. If you need a two column list then you don't need another class.
3. Instead of hardcoding, use final variables. For example padding, if you use a final variable for that, you can change it more easily.

Don't forget Android, design some apps, study the UI. You will get a good idea.

NOTE: Android uses dpi system instead of the traditional pixels. So it can be viewed perfectly in different screen sizes and resolutions. If you are targeting multiple resolutions on your game, your UI dimensions should be dynamic. In 4K texts cannot be at the same size as a 720p display.

I almost forgot: Listeners. When you select something in the list view, listener tells the upper class (where you used list view) that the something is selected and which one is selected. Listeners are important.

\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged .