Player Movement and Controls | Create an Amazing Game with Flutter & Flame
ฝัง
- เผยแพร่เมื่อ 21 มิ.ย. 2023
- 📺 Checkout the playlist - • Create an Amazing Game...
📂 Checkout the GitHub project - github.com/Spellthorn/pixel_a...
🖼️ Game Assets - pixelfrog-assets.itch.io/pixe...
💻 Tiled - www.mapeditor.org/
Welcome to episode 3 of our game development tutorial series, "Player Movement and Controls | Create an Amazing Game with Flutter & Flame"! In this video, we're taking the next steps in building our game using the powerful combination of Flutter and Flame.
We kick things off by diving into the creation of the player character. You'll learn how to design the appearance of your player and create the necessary assets like sprites or vector graphics to bring them to life in the game world. Discover how to seamlessly import these assets into your Flutter project and leverage the capabilities of the Flame game engine.
Once we have our player character ready, it's time to explore the captivating realm of animations. We'll guide you through the process of setting up animation controllers and defining animation sequences specific to your player character. With our expert guidance, you'll master the art of creating smooth transitions between various states, such as walking, jumping, and attacking. These animations will add a lifelike and dynamic touch to your game, captivating your players.
As we progress through the video, we'll demonstrate how to integrate user input with the player's movements and animations. You'll gain invaluable knowledge on how to respond to touch gestures and keyboard events, enabling you to update the player's position and animation in real-time. Our focus is on creating responsive and intuitive controls, ensuring that players have an immersive gaming experience.
Throughout the tutorial, we provide detailed explanations and practical examples that make grasping these concepts a breeze. You'll gain insights into best practices for organizing your code, structuring your animations, and optimizing performance. We want you to feel confident in your abilities to create impressive games.
By the end of this episode, you'll have a fully animated player character capable of navigating the game world with fluid movements. You'll have a deep understanding of animation fundamentals in both Flutter and Flame and will know precisely how to breathe life into your game using these powerful tools.
Don't forget to show your support by liking this video and subscribing to our channel. We have many more exciting tutorials lined up for game development with Flutter and Flame, and we want you to be part of the journey. If you have any questions or suggestions, please share them in the comments below. Together, let's create amazing games and continue our game development adventure!
Stay tuned for the next video, where we'll explore collision detection and begin constructing the game environment. Get ready to elevate your coding skills and bring your game to the next level. Happy coding!
🛡️Join this channel to get access to perks: www.youtube.com/@Spellthorn/join
Help me reach my sub goal by subscribing youtube.com/@Spellthorn?sub_c...
||||||||||||||| 233% ||||||||||||||| 4.67K/2K
Most recent subscriber: Mohamed Al-naagi
@Spellthorn is a talented web/mobile developer who is dedicated to helping others improve their coding skills. Through their TH-cam channel, they create informative and engaging videos that cover a wide range of programming topics. - spellthorn.com/ - แนวปฏิบัติและการใช้ชีวิต
It gets more and more excited with each episode, I can't wait to watch all videos of tutorial. You are really good at teaching, thanks!
I'm glad you're enjoying them. I'm trying to keep the excitement going so glad to see I'm accomplishing that goal. Thank you
I'm loving this series so far! This is my first time working with flame so your videos are helping alot. I'm looking forward to the next video. Notifications are turned on!!!
Glad you like them! Flame is pretty fun to work with but collisions is something I've started struggling with which is why the lack of uploads 😥, still trying to figure them out so they feel good.
Love the tutorial so far! I made some slight changes to the code, so the movement looks a bit more smooth. In the `_updatePlayerMovement` method, where the case is that the PlayerDirection is PlayerDirection.none I added the line: `dirX = velocity.x * 0.92;` This makes sure that when no button is pressed (no movement) the current velocity will gradually be smaller and smaller, making the player 'slip' a tiny bit, instead if an instantly full stop. It makes it feel a bit nicer. Of course when you implement this make a variable like `double final _friction = 0.92`. We don't want magic numbers haha :)
I also made an extension method on a PlayerName enum I made, that returns the right string with the right name of the character. The constructor takes instead of a character string one of the enum values. and in the actual asset string we can call the extension method which has a switch case that returns the right string. this way there can not be a typo in the player name :)
Keep up the good work! I'm working on the collisions now too, see if I can cook something up :)
I'm glad you're enjoying the tutorials so far. Adding friction is definitely a good thing to add. I've changed the code around a bit for the next episode to make it cleaner and better I may add friction to it too. Collisions have been the hardest part for me which is what's making the next video take so long. I have something working but it has some glitches that I can't seem to fix, I reached out to the flame forum on discord to see if someone can help guide me.
these series Deserves more views !! Thanks for the tutorial they are really helpfull. i will return back and show my personal game dev results
Glad you are enjoying it. I need to do another series 😊
@@Spellthorn Can you make a monopoly game ?
You are just perfect teacher. I learned what i need whit this series and this setion is my favorite 😍😍
Thanks 😊 I'm glad you're enjoying it. Flame definitely confused me a lot when I first started using it, so I figured I'd help others
The Best tutorial of the year
Appreciate it 🥰
Nothing to say... All in one and everything is perfect... Support and Lord blass you.
Thank you so much, glad you enjoyed it 😁
Hi, great tutorial, so clear, fresh, friendly and knowledgeable, keep up the good work amigo. I spent a lot of time rendering properly the joystick, I applied the suggested priorities and looked at your github repo and I still was facing roadblocks, but finally I did it, I think I was not placing the priority correctly for the camera and it worked using cam.priority, here you go what worked for me:
cam = CameraComponent.withFixedResolution(
world: world,
width: 640,
height: 360,
);
cam.priority = 1;
cam.viewfinder.anchor = Anchor.topLeft;
addAll([cam, world]);
addJoystick();
return super.onLoad();
}
void addJoystick() {
joystick = JoystickComponent(
priority: 2,
knob: SpriteComponent(
Glad you are enjoying it and thanks for the update I know a lot of people are having issues with the joysticks I think due to an update
@@Spellthorn Amazing videos! sorry I'm a rookie how exactly can you change priority?
@@Spellthorn I downloaded your code from GitHub and I can see the updated code everything loads up but it seems I'm still not able to see or use the joystick feature. Any ideas?
finally i got this , thank you so much Olim 😀😀😀😀😀😀
This dude's a genius. Cool series ✨
Thank you 😊
Don't stop bro, it is great
Glad you're enjoying it. Working on next episode already 😁
thanks for making this videos, waiting for the fourth tutorial, greetings from México
Im glad you're enjoying it. I definitely started running into some road blocks when it comes to collisions and struggling to figure out the best approach, I'd be lying if I didn't say has really ruined the motivation for me to keep going at this in flutter was thinking of jumping ship to html and JavaScript 😆 ill try again this weekend and see if I can figure it out
@@Spellthorn I was doing collision tests with @CraigOda videos and they work very well, the problem is that some components in the videos are outdated
Yea I saw another tutorial about collision and they use a circular collision on the player and do the code that way so I may look into that way because when I tried to do a rectangle hit box it breaks all the time. I've studied other methods in javascript etc but they mess with when checking collision and then applying gravity which I haven't found a simple way to do in flame using the oncollision start. Thanks for the advice 😁 downside to working solo no one to really bump ideas with other than chat gpt haha
So ready for the next installment :)
So I pivoted and figure out how to do it with html and javascript. so I'm working on implementing it into Flame, fingers crossed works the same 😄
Spent all day messing with it and good news IT WORKS!!! so should be able to record next episode in a few days 😁
@@Spellthorn Yesssss! Thank you for working at it so that you can present it for us
Yea it definitely was tricky, glad I got it figured out
wow, that was a very good tutorial, thank you a lot, and I hope I can do a video like this.
Thanks, good luck 😊
your video are freaking good!
Thank you, glad you enjoy them.
Very a fantastic tutorial, I'm sad that not enough subscribers & views on your channel 😢, I hope to be continued this playlist
Yea I'm not sure how popular gamedev in flutter is. I'm starting to realize making a platformer is harder than it looks 🤣
Hello it is nice tutorial thank you, and I have a question, my joystick is under the map layer and how to show it on top like in your example? could you tell me?
same problem i have , is you fixed it
same problem
Should be able to change priority, higher number closer to screen lower further away.
I think its not recommended.. but the problem is that the camera has the MAXINT priority and its focused on wolrd(game level). I fixed it by setting camera.priority to 1000, and joystick.priority bigger than that( i put 9999 but i think 1001 would also do the job) but i doubt this is a good way of doing that .
Thank you! Works fine with priorities 1000 / 1001 for camera / joystick!
i found out that if you open the game fullscreen in windows, some part of the joystick is overlapped with the game and only half of the joystick part is shown. Do you know how to make its z-index highest?
Here is my fixes in pixel_adventure.dart:
```
@override
FutureOr onLoad() async {
...
cam = CameraComponent.withFixedResolution(
world: world, width: 640, height: 360);
cam.viewfinder.anchor = Anchor.topLeft;
cam.priority = 1;
addAll([cam, world]);
return super.onLoad();
}
```
AND
```
void addJoystick(){
joystick = JoystickComponent(
priority: 2,
...
);
add(joystick);
}
```
thank you @@sonnguyenphuc8142 , that helped a lot
I was having the same issue and I figure out that I needed to change the priority of the camera and joystick component.
Leaving this in case it helps someone else:
joystick = JoystickComponent(
priority: 1,
...
);
cam = CameraComponent.withFixedResolution(
world: level,
width: 640,
height: 360,
)
..priority = 0
..viewfinder.anchor = Anchor.topLeft;
I solve it, thanks to you brother
@@mathiaszunino6735 thank you
New Sub here! Loving the series and looking forward to the next episode 😃
I'm glad you're enjoying it. I've unfortunately hit a huge road block when it comes to collisions with a rectangle hit box, still trying to figure it out. I have thought about ending the series and switching it to html canvas and JavaScript as collisions are easier. But still trying to figure it out
@@Spellthorn Oh wow, thanks for the update. I'm hoping there is an easy solution you'll find just using Flutter & Flame.
Yea there's an easy way to do it with a circlehitbox but then the player falls off corners etc which I don't really like so trying to find a better solution for rectangle
@@Spellthorn Thank you for all the effort! I will stay tuned for more updates. =)
Would you like a tutorial series with html canvas and JavaScript or only if done in flutter and flame? Wondering if people would be okay with a pivot 😄
RawKeyEvent is deprecated and the code provided does not work as expected with the replacement class KeyEvent. The character does not stop on KeyUpEvent and keeps going in the playerDirection set. Only when pressing an unrelated key (neither A D arrowLeft or arrowRight) will stop the character because it will trigger the default switch case.
It would be nice to have a corrected version example with KeyEvent instead.
Thank you.
EDIT : I figured something out, in the emulator window in android-studio there is a mouse and keyboard icon that can be enabled to send "Hardware Input" instead and you get the appropriate behaviour with KeyEvent this way.
On MacOS and IOS emulator "I/O"-> "Keyboard" -> "Connect hardware keyboard" needs to be enabled
hey for some reason when I add my joystick it shows up kind of underneath the game ive been trying for hours to get this to work but cant get it to, my code works its just the little visual thing where its shows up under the game
Great video as always but It gives me this error 'The matched value type 'Type' can never be equal to this constant of type 'PlayerDirection'' in my _updatePlayerMovement method in the switch statement. any idea what should i you?
really it a nice tutorial for beginner and I am also learning this, but i have some issue in moving object when i pressed any left or right key object appears outside the game area.
Hmm I'd have to see your code to see what's wrong.
Completely understand the logic of player movement by Keyboard also with Joystick. Professional teacher :)
But Can you please let me know about the Vector2 thing, Im not getting it?
Thank you.
Glad I could help 😁 Vector2 is an x and a why in our case x is horizontal, and y is vertical, so if you want player to move left and right you change x and if vertical you change y. Hope this helps let me know if other questions 🙂
@@Spellthorn Yes, Im at 9th video of your playlist, at this point, I know very mush of things, Thank you Teacher :)
i'm trying this now and i wanna ask why my joystick is showing under the tiledComponent(the level) and not on top of the tiled component?
Change priority
how please tell me i am stuck on it from last 6 hrs@@Spellthorn
Hi sir, My knob is going behind the seen(Level) help me with this.
increase the priority of your joystick
Great tutorial, loving it.
Btw, just for reference, you can create a Joystick HUD using CircleComponent instead of creating PNGs with Figma and passing them with a SpriteComponent.
It will be more easy for testing purpose.
joystick = JoystickComponent(
knob: CircleComponent(
radius: 30,
paint: BasicPalette.black.paint()
),
background: CircleComponent(
radius: 60,
paint: BasicPalette.black.withAlpha(100).paint()
),
margin: const EdgeInsets.only(bottom: 40, left: 40),
);
Thats very useful, thanks. I took this approach in case you wanted to make images so they look different, but I did just make a basic image of it 😄
Cant figure out why but my joystick is rendering under the level. please help..
Try changing priority
You can also create the joystick without images:
background: CircleComponent(
radius: 48,
paint: Paint()..color = const Color(0xFF000000),
),
knob: CircleComponent(
radius: 32,
paint: Paint()..color = const Color(0xFFFFFFFF),
),
Yea that's good practice too. I should have shown both options. Thanks for sharing it
In my case, Why joystick showing under the main game background where we set the default color in the first video
After some hours of headache the answer is to set camera priority below the joystick one.
but how todo it i am stuck here for last couple of hrsss@@kabu55
@@kabu55 thank you
hi i have a probelm, half the joystick is not showing... only showing on the backround but not the level itself
A lot of people seem to be having this problem I'm not sure if something was changed since I made this video, or a lot of people are missing a step. I make the priority 10 so it sits above everything else.
@@Spellthorn
Able to fix through by setting
cam priority to 1,
joystick priority to 2
I love you .. please create a RPG Like a pokemon!!! pls
I do want to make a top down game, probably more like Zelda than Pokemon though.
My joystick is not working anyone know the reason
I check the code and video so many time everything is perfect
Did you figure this out?
Need help, My player isn't responding to the joysticks but only to keys(A,D,right,left). What to do? (The code is same as yours I have checked thoroughly) even when showJoystick is true , the player is still responding to the keys.
What does you joystick code look like?
@@Spellthorn
void updateJoystick() {
switch (joystick.direction) {
case JoystickDirection.left:
case JoystickDirection.upLeft:
case JoystickDirection.downLeft:
player.playerDirection = PlayerDirection.left;
break;
case JoystickDirection.right:
case JoystickDirection.upRight:
case JoystickDirection.downRight:
player.playerDirection = PlayerDirection.right;
break;
default:
player.playerDirection = PlayerDirection.none;
break;
}
}
}
@@Spellthorn void addJoystick() {
joystick = JoystickComponent(
knob: SpriteComponent(
sprite: Sprite(
images.fromCache('HUD/Knob.png'),
),
),
background: SpriteComponent(
sprite: Sprite(
images.fromCache('HUD/Joystick.png'),
),
),
margin: const EdgeInsets.only(left: 32, bottom: 32),
);
add(joystick);
}
Thanks for sharing the code. The only think I could think of is you don't have the player class set up correctly to use the playerDirection. However, in a future episode we tweak this a little bit so maybe for now I would say ignore the joystick until the episode we update it.
@@Spellthorn
late JoystickComponent joystick;
bool showJoystick = true;
if (showJoystick) {
addJoystick();
}
return super.onLoad();
}
@override
void update(double dt) {
if (showJoystick) {
updateJoystick();
}
super.update(dt);
}
Can we make a game that is made from unreal engine with flutter ?
No, that would be two different "game engines" and would not work. You can however make mobile games in Unreal Engine. but wouldn't use Flutter to do that.
@@Spellthornthanks for confirming this. I think game development would be more awesome if flutter have these features
Yea flutter wasn't really a game engine just flame makes it so it can be. So won't have those features. Would be better suited for an actual game engine
somehow, my joystick is under the world, could you say why it can be there?
but I see the joystick, if I put it into the world where there are no textures :)
and if pass it inside Level class and add it there, it's above the world
I have the same problem, I can't fix it even if I add in the Level onLoad
I solved it using hudComponents prop in CameraComponent.withFixedResolution() :D
try changing margin to 200, 200 and it'll re appear on your screen
Don't know the reason but my joystick is at the extreme back of the game
Change the priority, the higher the closer to the screen
@@Spellthorn did that, didn't work. The Joystick component gets cut by the Tiled one
add the joystick to the cameracomponent instead. cam.viewport.add(joystick);
I can't fix joystick position , it's not work :
void addJoystick() {
joystick = JoystickComponent(
knob: SpriteComponent(
sprite: Sprite(images.fromCache('HUD/Knob.png')),
),
background: SpriteComponent(
sprite: Sprite(images.fromCache('HUD/Joystick.png')),
),
margin: const EdgeInsets.only(left: 32, right: 32),
position: Vector2(40, 150),
);
add(joystick);
}
Margin used here is placing it from the edges of the screen so its probably messing up with your position, I would try removing margin or position and see if solves your issue. For the project I only used margin
Remove the position prop and try this margin:
margin: const EdgeInsets.only(left: 32, bottom: 32)
Great help
@@ricardomejias7957 Great !
Thank you so much !
Glad it was helpful 😁
Great Video so far man! I am facing one difficulty tho....
bool onKeyEvent(RawKeyEvent event, Set keysPressed) {
horizontalMovement = 0;
final isLeftKeyPressed = keysPressed.contains(LogicalKeyboardKey.keyA) ||
keysPressed.contains(LogicalKeyboardKey.arrowLeft);
final isRightKeyPressed = keysPressed.contains(LogicalKeyboardKey.keyD) ||
keysPressed.contains(LogicalKeyboardKey.arrowRight);
horizontalMovement += isLeftKeyPressed ? -1 : 0;
horizontalMovement += isRightKeyPressed ? 1 : 0;
return super.onKeyEvent(event, keysPressed);
}
The bindings for keyA and keyD lag or moreover move the player in a very slow manner in the direction when pressing either of the two. Also my arrowLeft and arrowRight work when pressing up and down arrow keys...How do i fix this?
For the slow movement make sure you're multiplying the movement by movespeed. I'm not sure why your up and down arrows would trigger as well. Can you print the key your pressing and see if maybe an issue with what keys your keyboard thinks you are pressing
I'm getting a similar issue where its registering my up and down arrows as left and right and no other keys are working. I've printed the key inputs off and all the other keys are printing with there correct label and Id's but left and right registering as up and down. I've tried to handle the key inputs using just key code but I couldn't get that to work either >.
oh @tonytonychoppee9799 are you emulating on mobile or Mac or chrome - the keyboard inputs might be all fuckie if its mobile
@@karmarbarrett1367 yes i figured it out, mobile controls work very different hence joystick to the rescue
Yea keyboard controls don't work on mobile if you emulate mobile and press a key you can see it like outlines the screen and won't work. Joystick is your best bet
Hello, thanks for making this video, could you plz help me, i did exactly same as you but I still getting bug. Player is not moving anywhere
bool onKeyEvent(RawKeyEvent event, Set keysPressed) {
horizontalMovement = 0;
final isLeftKeyPressed = keysPressed.contains(LogicalKeyboardKey.keyA) ||
keysPressed.contains(LogicalKeyboardKey.arrowLeft);
final isRightKeyPressed = keysPressed.contains(LogicalKeyboardKey.keyD) ||
keysPressed.contains(LogicalKeyboardKey.arrowRight);
horizontalMovement += isLeftKeyPressed ? -1 : 0;
horizontalMovement += isRightKeyPressed ? 1 : 0;
// hasJumped = keysPressed.contains(LogicalKeyboardKey.space);
return super.onKeyEvent(event, keysPressed);
}
and after clicking several times it moves a little. Thanks for helping!
What does your update player movement look like? Make sure your multiplying your horizontal movement by movespeed
I'm loving this series so flame tutorial!
Glad you're enjoying it ☺️