The class hud:
lib\components\hud\hud.dart
import 'dart:async';
import 'package:flame/components.dart';
import 'package:flame/palette.dart';
import 'package:flutter/widgets.dart';
import 'package:parallax06/hud/joystick.dart';
class HudComponent extends PositionComponent {
late Joystick joystick;
@override
void onLoad() {
final joystickKnobPaint = BasicPalette.red.withAlpha(200).paint();
final joystickBackgroundPaint = BasicPalette.black.withAlpha(100).paint();
joystick = Joystick(
knob: CircleComponent(radius: 30.0, paint: joystickKnobPaint),
background:
CircleComponent(radius: 100, paint: joystickBackgroundPaint),
margin: const EdgeInsets.only(left: 40, top: 100));
add(joystick);
}
}With the following implementation, you can scroll a player using the scroll
class PlayerComponent extends Character with HasGameRef<MyGame> {
***
final double _maxVelocity = 5.0;
@override
void update(double dt) {
***
_movePlayerJoystick(dt);
}
void _movePlayerJoystick(double delta) {
if (gameRef.hudComponent.joystick.direction != JoystickDirection.idle) {
position.add(gameRef.hudComponent.joystick.delta * _maxVelocity * delta);
}
}
} Video Transcript
Lets start implementing our joystick or at least a part of it the movement part which is simple but in order not to make it so long well see it in the following video so here were going to make the signature also create the joystick as such and of course be able to see it here at the screen level so for this to have this a little more organized Im going to create a component a folder called Hood here were going to create our redundancy starting with the joystick here you can place the word component as well but well so as not to make this too dizzy Im going to leave it like this and I like to always show well make several variants here in my code anyway here we have the class with the same name called joystick that extends from joystick components joystick here we have it component and here we have well where it is found in components like most or like all which were going to place here constructor and we indicate the necessary parameters for us the component position for the background which is the control or the command here we have another component position for the background this is also required place polygon my God position Music also required and the margin finally here we call the superclass that is this is our constructor the one for we that is also required and this is the one of the joystick class as such of I am this component of the super class Remember that this Call again the parent method that in this case would be this then here we pass the cone Notice that we already have it or not Better said this is ours Remember that this is the one of this class and this is ours there you can see it more clearly Well I know that I will take a little bit sometimes with which background Here I also place the background and finally margin with this with these three simple properties we already have our joystick here anyway we go back here and create another one called and here we place Boot it will extend from a component position and here we create an instance of our joystick here it is also better to place joystick so that it does not collide with the I this compose of flame This is ours again this one do not confuse it with this anyway around here in it we do the initialization part and all this so well This I think is no longer going that it is And this would not be necessary that is always changing flame anyway around here we create our joystick instance very important again place joystick and around here we have to pass all this so up here we are going to create its values the first one is going to be that of the noc which is a basic red point Well here we have several colors I am using the ones I already showed you before Alpha point good for the Alpha and finally Pain to create the color for the next one It would be for the background placement that is going to be Black type as I showed you and here if we are going to lower the Alpha quite a bit We already have it now with these colors we can perfectly create our component Remember that this receives in component position then well usually a circle is placed Because we want it to be circular there is a lot of twist in this matter over here we place well for a circle we need to define the radius to define the size of it This is basic high school and elementary mathematics Well here we place the radius that will have a radius of 30 here we can indicate a color so that it is visible in this case as is the noc then we place the one for joystick Paint and a similar process for Macro we place a radius only in this case it is much larger and these are values that I studied and are the ones that I am using
joystick = Joystick(
knob: CircleComponent(radius: 30.0, paint: joystickKnobPaint),
background:
CircleComponent(radius: 100, paint: joystickBackgroundPaint),
margin: const EdgeInsets.only(left: 40, top: 100));So okay you can try others but these are the ones I want and for Paint, we put the Power Paint joystick finally here I'm going to lower this we put the set point only we put LED at about 40 this logically is a constant so we put it and well and here we have our joystick as simple as that and here we have the visual part then we need to add it we put the joystick and this would be all for here we are going to return here to the Main and the only thing we have to do here is create an instance of our right so we put late here I called it only Hood I should put component blame on this component so it is clearer it is public in this case because we are going to access it from the Player so now at the level wherever it is here it is we create an instance we put component it will be equal to hot component and here we add it and this would be practically everything this defines it as law no let's see let me check yes late then we run the application here and you should see our circle as I showed you before somewhere on the screen ready to be used without yet implementing any logic for the displacement part but okay let's wait here for a second and here we have it here we have it on the screen here you can put [Music] another value on the side if you don't like it feel free to customize it I leave it there And notice that we can now move it, that is to say we already have this behavior for free thanks to using our I am componite, that is to say the deflame over here just as you can see so all that is left is to implement the movement part But we are going to do that in the next video.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter