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.
Video Transcript
Now we are going to add some interactivity to our application again, that is to say that our user can interact with our application, which we have here, since the exercise that we are going to want to do a little later is that you tap here. So here we are going to change the animation to start doing the whole process that I explained to you previously, of course you can do it with a keyboard, but I don't want to do it. At least that way, so we also take the opportunity to present another mechanism in which we have here for data entries, remember that here we are in the flame documentation. Here I selected the last one, which would be the date, here we give it input and here we have the keyboard one that we already saw and we also have the tap one, which is the touch one, like the click one, but touch the screen, which is very, very simple. In the end, you can remember a little what I was telling you about the inputs, which are the mechanism with which we, that is to say, the player, can interact with our application, either by the keyboard, in this case it would be by tapping, but it is so that you can move it, jump, everything depends on the type of application that is being carried out, since for example it could be a flappy Bird type game, in this case ... In this case, the keyboard would not be necessary, otherwise it would simply be touches on the screen, but it may be without games like Mario, Pokémon or whatever, in which we have either the crossheads on the screen or directly the keyboard, it all depends on what you want to do, and that is why we have these entries, we are going to see here the stage which we are going to start again here with the class since we also have it at the component level, as you can see here, here we also have to carry the components, at the moment we are not going to see that, but here we also have it for simply the game type class, in this case it would be the playing one. I hope I have explained myself correctly, and well, for the rest, when adding the class, it would not be this one, it would be the detector, well, now we will review it, we will have use of these functions, which are several, as you can see. You might wonder why the hell we have four functions, that is to say:
We have the up one here, and finally the cancel one here, well, we have four because there are several possible scenarios, this would be the model, that is to say, the one that we are practically always going to use, that when the user touches the screen, what is the problem? What is the situation? There are two types of touches, just like what happens with clips. we have a sustained click, that is, the long type or we have a simple one and it is basically what we have here, this would be for when the user presses the key for a few thousandths of a second. So we already have a sustained click and this would be the typical simple touch, that is why we have two, one for this one and another for the other, which one to use depends on your application. We also have another one that is interesting since this one will be executed only when the previous sequence, that is, this function was successful, which brings us to the next case. I am going to leave this one here in the middle to explain this one later, I think this one is better understood here. We have one called optan Cancel and this one will be executed when problems occur, that is, when the event failed. You might wonder how the hell you can happen that. Well, as it indicates here, there are several scenarios, for example, when the user presses But then it becomes Data, that is, to drag, which is another of the inputs that we have here, or simply when the component changed location, the application disappeared, this type of scenario means that this function will be executed, that is, when problems occur, those that do not lead to this one that we have here and this one will only be executed. When we have no problems, that is to say when cancer does not occur and it will be executed right after What does it mean when Well and this event is when we lift our finger And we have everything again This is the one that will be executed when we tap this would be When we have the token this would be When we have problems and this would be when we lift our finger that would be all that is why we have four and finally to use it we are going to come here to the main class to the main file and over here I don't know if they will take it, I am going to place the pack detector here and with this we can use the previous functions I am going to place two here so as not to complicate things too much, I am going to see if a tap recognizes it, here we have the Down one:
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;
}
}The one that I was telling you we are going to print here the info placed and we also have the one for up and the same I am going to print here the this more than anything gives us information about where the user pressed that is to say in which part Based on some coordinates the user touched the screen that would be practically everything we give a reload here Well here we have all this we have to discount this now So that it does not make noise since we tested it I am going to comment on the pin I think it was not This was this one to comment here The pin to test this in a better way And we return through here here we have the application we give a touch we give another touch and here we have it as is you can see notice that first the Down is executed And then the finger when the touch ends and here we have the distance of the same.
well again you can use it In case you want more information Generally it is not necessary Although it depends again on the game you are making but with the touch you can already chain something, for example jumping in our case it will be changing the animation Although of course for this we need to bind all these events directly in the component and not here in our main class, that is to say to the class at the class level in this case the flame game type class But we will see that in the following video.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter