Drawing onscreen controls
In this section, we will add a joystick and a button to the screen that will allow us to control the character and some text for showing the player their score. These three components will form part of our Heads-Up Display (HUD), which is part of the user interface, showing game information that is drawn over the other graphics in the game and remains in a fixed position. The type of information could be the player's health, the number of lives remaining, or, in our case, the game score.
We will encapsulate our HUD into a single component, which makes showing or hiding it easier. The HUD component will contain JoyStickComponent for controlling the direction that George moves; the joystick will work by dragging an onscreen circle within a larger circle in the direction you want to move. The HUD will also include HudButtonComponent, an onscreen button that the player can press to double George's walking speed, making him run.
We will connect...