Input: Keyboard
Provide the user so that he can interact with the game through:
- Keyboard
- Drag and drop
- Gestures
- Tap (in most cases, equivalent to the click event)
- Virtual joystick
Among others; inputs are a fundamental functionality in any game today; in Flame, we can implement this type of functionality through events which are listened to by a listener method.
In this section, we are going to work with keyboard input; Flame offers two different ways to take keyboard input:
- At the level of the Game class.
- At the component level.
In any of the scenarios, its use is very simple and is similar to other approaches, for example JavaScript, in which, we have a listener method called onKeyEvent that is executed every time a key is pressed, in said method, we receive the event with the key pressed to which, we can apply any logic.
Game class level
In order to equip the application to recognize keyboard events, that is, when a key is pressed, to be able to assign some method, we can use the KeyboardEvents class on the Game type class.
This has been the most global way, since the events are executed at the level of the Game class, which we remember is global to the entire application and not to the components, which is where most of the time we are interested in interacting; that is, as we saw in the previous example, in which we draw a sprite in a component, if we wanted to move that sprite, which our player can simulate, we are interested in that said component receive keyboard events (or input in general); even so, it is important to know that at the level of the Game class we can add this type of interactivity since, many times it is necessary that several components need to perform some functionality when (for example) a keyboard input occurs; suppose we have two components:
- A player
- Stage
As we saw, they are two separate classes, depending on the logic of your game, it may be that, by pressing (for example) the movement key (up arrow or the W key) this applies movement to the player and a change on stage, and in these cases, two components must be communicated and not just one.
FlameGame class level, we must add the KeyboardEvents mixin and with this, override the onKeyEvent method; this method receives two parameters which return the keys pressed:
- The RawKeyEvent
- The LogicalKeyboardKeys
Practical case
Continuing with our application, we are going to place the keyboard input listener at the FlameGame class level:
class MyGame extends FlameGame with KeyboardEvents {
***
@override
KeyEventResult onKeyEvent(
RawKeyEvent event,
Set<LogicalKeyboardKey> keysPressed,
) {
super.onKeyEvent(event, keysPressed);
//print(keysPressed);
print(event);
return KeyEventResult.handled;
}
}When pressing different keys, with any of the events, we will see an output like the following:
{LogicalKeyboardKey#00301(keyId: "0x100000301", keyLabel: "Arrow Down", debugName: "Arrow Down")}
RawKeyUpEvent#881c1(logicalKey: LogicalKeyboardKey#00304(keyId: "0x100000304", keyLabel: "Arrow Up", debugName: "Arrow Up"), physicalKey: PhysicalKeyboardKey#70052(usbHidUsage: "0x00070052", debugName: "Arrow Up"))In the above case, the arrow up or arrow up key was pressed.
For this experiment, we will not make any further adaptations in the application, since the game logic will be implemented in the components and not at the game level.
You can create conditions like:
keysPressed.contains(LogicalKeyboardKey.arrowUp)To ask for the key pressed.
- Andrés Cruz
En español
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter