Chapter 5: Moving the Graphics with Input

In this chapter, we will take control of our own character and move them around the screen with virtual joysticks and touch events, so the player can choose where they want to move their character.

We will start by looking at how to draw onscreen controls that behave like a thumb-stick on a PlayStation controller, with action buttons for things such as attacking and jumping. Next, we will connect the virtual controls with our George sprite and get him moving around the screen. And finally, we will discuss an alternative or addition to virtual controls, by controlling George with touch events, such as tapping on the screen and moving George to a tapped location.

So, we will cover the following topics:

• Drawing onscreen controls
• Moving our character with onscreen controls
• Moving our character with touch

Technical requirements

To examine the source from this chapter, you can download it from https://github.com/PacktPublishing/Building-Games-with-Flutter/tree/main/chapter05.

You can find additional information on Flame input in the online documentation at https://docs.flame-engine.org/1.0.0/gesture-input.html and https://docs.flame-engine.org/1.0.0/other-inputs.html.

In the next section, we will start by adding the onscreen controls and drawing them on the screen.

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...

Moving our character with onscreen controls

In this section, we will start by connecting George's movement to the joystick.

Currently, the George class inherits his movement from the base class, Character, which it shares with the Skeleton and Zombie classes. As George will have different movement code from the enemy sprites, let's refactor the code to allow the enemy sprites' movement code. We will move the existing movement code into an EnemyCharacter class, which will become the new base class for the enemy sprites and remove this code from the Character class.

Let's get started:

1. In the components folder, create a file called character_enemy.dart.
2. Open the file and add the code at https://github.com/PacktPublishing/Building-Games-with-Flutter/blob/main/chapter05/lib/components/character_enemy.dart.

In this code, the EnemyCharacter class extends our Character class, and we have copied the onCollision, update, and changeDirection functions...

Moving our character with touch

Now that we have George moving with the joystick, let's look at an alternative method for moving our character via screen touch events, which is very popular in games. With mobile devices having very sensitive high-resolution screens nowadays, we can use touch events or gestures to move our character from its current location to the location on the screen that was tapped. Using trigonometry, we can calculate the angle between the origin and target locations and use the angle to move George in the correct direction, with the correct animation that matches the direction.

We are already detecting a tap event for the run button via the HasTappables mixin. So, to detect touches on the screen, we need to add the Tappable mixin to the Background class and override onTapUp to get an x and y location that we can use to calculate the movement.

Because we need to know this coordinate inside of the George class, we will need to pass in a reference to...

Summary

We covered a lot in this chapter, and the game is really starting to take shape. We learned how to create onscreen controls for our game with a joystick and a run button, as well as how to add text on the screen for our score. We then learned an alternative method for controlling George by allowing you to touch the screen to move him to the touched location.

The game is a bit quiet at the moment, though. In most games, music soundtracks and sound effects are used to create atmosphere and bring them to life. In the next chapter, we will add some music and sounds to the game to enhance it further.

Questions

1. What is a HUD and what is it used for in our game?
2. Which mixin do we use to convert a component to detect when it is touched?
3. What component do we use to draw text on the screen?
4. Why do you think JoystickComponent needs the HasDraggables mixin?