This is a great series, I´m really enjoying how simple and practical your approach is, coding along line by line without crazy copy pasting or pre-coded files. I am already a Flutter developer, so focusing only on the Flame specific features like you´ve been doing resonates with my needs. Thanks and keep on the good work!
I'm glad you're enjoying the series so far. Yea I always hated tutorials where they copy paste a lot, like umm what does that do and why. I'm still working on having a good structure, I work out this code before hand sometimes takes hours to figure out something then struggle to remember the order I did it, so I've started taking notes while coding
@@Spellthorn another thing I forgot to mention: displaying your keyboard input on the recording while typing is a great touch, really helps catching those keyboard shortcuts
I was waiting for this video, Amazing work. There are some videos available for flame and flutter together but most of them are outdated. Iam working on a 2D game and this series has been a very helpful tool for my work. Thanks 🙏
Thank you for that videos! It's easy to learn by them! Just a tip: Flutter has geometry classes like Rect that has a method called 'overlaps()', and you could create rects and check if they overlap each other easily.
I'm late to the party but great tutorial so far! I've learnt a lot about Flame from your videos. If you want to shorten your code a bit in 19:00, now you can make use of extension helper getters provided _final platform = CollisionBlock(position: collision.position, size: collision.size, isPlatform: true,);_ Thank you for this tutorial :)
the issue of Player getting pushed outside the game frame was resolved by checking the update order. Proper ordering of update operations is crucial in game development to ensure that each step is executed in the correct sequence.
Hello sir. Thank you for the great tutorial..but..how can I do a player double jump? I tried to figure this out, but when the player pressed the "space" button to trigger the jump function...the game engine continued counting until the player returned and touched the ground...so I was not able to add an int variable to count the number of presses on the "space" button. Although in the "hardware_keyboard" class There are Event like "KeyDownEvent" and "KeyUpEvent" but I couldn't get any of them to work. thank you
Nice series. Just a comment about using super in the constructor. If you are just passing the value through to the super constructor, you can just use *super.position* as the parameter to the constructor. So for example the entire CollisionBlock constructor can just be: *CollisionBlock({super.position, super.size, this.isPlatform = false});*
I took your series as my introduction to game development, and I just have to say: Great work! I just had a problem with the collisions with the blocks. I put a block just two tiles above the ground, and when the player jumps below it while running to the right or left, the collision throws the player to the side instead of moving him down. I haven't figured out how to solve it, and I would appreciate any advice. Thank you!
help me out, after implementing vertical gravity whenever i am moving my character it goes straight out of map, i am stuck couldn't figure out the issue
Hi! First of all, thank you very much for this tutorial, it has been great so far. I played around with the Godot engine but I felt without control of many things so I'm giving a try to Flame. My question is about the collisions, I'm wondering why didn't you use the HasCollisionDetection mixin from Flame. Maybe I missed the explanation from the video, sorry if that was the case. Thanks again for your effort and for sharing it!
I'm glad you're enjoying the series. I've used godot before but yea definitely liking Flame. So the reason that we didn't use the built in collisions is because you're always colliding which causes many errors so it was easier to check the horizontal collision first, then apply the gravity then check vertical collision rather than the built in collision always checking it. There's probably a way to use the built in collision but I tried figuring it out for weeks so just gave up 🤣 in the future episodes we do use the built in collision though 😁
@@Spellthorn Thanks for your answer! Glad to hear that you are using it in following episodes (because I paused your video and went to the docs to use the mixin and now I'm kind of stuck too 😂the player stops but just for a while). Keep up your good work! 💪
Yea there is a tutorial to use it with a circle hitbox and it works well. But for rectangle hit box it just doesn't work right. So not worth the hassle to figure it out 🤣
@@Spellthorn Finally I made it work well with the rectangle hitbox reducing the box size and a couple of flags to avoid changing the position on the collision. I'll continue with the gravity part hoping that my code will not be that different to yours 🤞
Thanks for your great video! I've learned a lot from your video. However I think I've found a bug about the gravity. You've updated the velocity according to the gravity. `velocity.y += gravity;`. However, just like you mentioned in your previous videos, you should multiply the gravity by dt. Otherwise, our player will jump differently in diffrent fps.
I've been stuck on this jump height issue with FPS differences between different phones for three days. You've been a huge help! Thanks for your comment, buddy!
Hi, I have 2 issues: the movement does not work when i press A or D; and may arrows is wrong (its like my keyboard was Landescaped... lol), my Up arrow acts like Right arrow, my Down arrow as Left arrow, my Right arrow as Down, and the Left as Up. Anyone knows how to solve? :) thanks
While testing the application properly, the character is getting away from the box. It seems it's working perfectly in the video, but in my application, it getting away from the box. Any suggestions?
I don't have exp in game development but I can't image it's normal to have the _checkvertical/horizontalCollision() type methods where you loop through ever collision block to check if it's overlapping the character. Isn't there an event listener/callback style way to achieve?
Yea it could be bad but haven't found a better way to check it. It has built in collection ability but that caused way too many issues so went this approach
Great tutorial series I'm really enjoying it! I have an issue when running it as a macos app. When I use the keyboard I hear a system sound on every click. Any suggestion how to overcome this?
thank you for your video!!! but i have a question about my bug. When i start the game, if i press leftarrow button, the player teleport to the lefttop corner ( x: 48 y: 48) and when i press rightarrow button, player suddenly goes out of the map and it falls down out of the screen. I compared all of the codes of mine with your codes on the github but everything is fine. I don't know the reason why this bug happens. Do you know any solutions??
This could be a collision issue as if it collides with bottom first it then moced you to the ends. Make sure your checking horizontal collision first then vertical otherwise this happens
@@Spellthorn In player.dart file, i changed the order of _applyGravity function and _checkVerticalCollisions function in update function and it worked. the _applyGravity function should be the first. Thank you for your answer :)
Here is how you would use the built in collision detection without making your own: void _checkHorizontalCollisions() { final playerBounds = toRect(); for (final block in collisionBlocks) { if (playerBounds.overlaps(block.toRect())) { if (horizontalMovement < 0) { position.x = block.toRect().right + playerBounds.width; } else if (horizontalMovement > 0) { position.x = block.toRect().left - playerBounds.width; } } } }
Works well. Thanks. Just a note that although you are using built-in overlap detection, there is a real collision detection system that uses callbacks.
Just a tip, try to discover BonFire, it's completely compatible with Flame, and it provides many helpful functions. It's most used in RPG games, but still it might be useful.
@@Spellthorn I'm really excited to see the end version of this game, I'm sure you'll reach a place where you need State Management, storage, etc, that's what I'm looking for. Also, it would be nice if you present any idea how to make scrollable background, like in your game, imagine if the character can walk left infinitely.
Great work man! Thank you. I just had a problem, i got same constants than you but my character jumps really high, i dont know why :( I mean, i adjust the constants but i wonder why is different? Maybe its because behaves different depending each device, if so, how can we avoid that?
In the video he set the jumpForce to 460 but somewhere along the way (maybe he edited the video) he changed it to 260, i saw the value it in the github project.
😮I was working on a thrust method of flying a player, I use a joystick component, however the Player doesn't fly towards the initial direction for a little while like any projectile then fall parabolically...but mine is completely stopped when I let go the joystick and gravity takes his soul almost instantly, how do u think I should approach this?
Hmm. To me it sounds like you'd want to decrease your y velocity while holding the joystick so it keeps subtracting more and more. And then if let go then have gravity start. Which should start it at a lower number and increasing making it more smooth. Also clamping the velocity so don't fall too fast
Thrusting up should just be as easy as keep subtracting from your why, while button is pressed. Then stop when letting go and have gravity do the rest. Something like If(thrust) { position.y -= thrustAmount; }
@@denilsonwashuma1987 nah I didn't solve it, I left another comment in this section.it seems, We kinda need to be the first to integrate our own ironman logic from scratch to Flame
The video was amazing, but Im not a good student of physics, velocity, gravity and other stuff are hard to understand. 😄 Im still try to understand them.
Is gravity causing it when it touches something to move outside the frame? Or when it first spawns is it spawning outside the frame? If its the first one turn off gravity and see if still happens. If its the 2nd one try a different position point
@@Spellthorn i am having problem like the portion below the vertical frames have become colliding like my player can't go below the frame too. like where ever i keep my vertical frame the portion below i collide
Okay so it seems the error is definitely somewhere with the collisions, I have my code on github, it is a further version then where you are at but I would consider viewing that and seeing where your code may be different at least for the sections to where you are now
Glad you're enjoying them. Sometimes when coding refactoring will need to be done. If there's a better way to do something, you should do it as early as possible otherwise you wont want to at the end or break stuff later if you do.
Nice series! 🩵 But why do you use switch statements when you don't need to and don't use them when you need to? And don't ignore type safety please, it hurts to see your dynamic parameters 🙏
Well, I'm a self taught coder so ... I don't always use good practices, I use what works in the moment, and what I feel makes sense. This leads me to doing things wrong a lot in terms of common practices as I don't know what they are, but hey if it works it works right? 😂
This is a great series, I´m really enjoying how simple and practical your approach is, coding along line by line without crazy copy pasting or pre-coded files. I am already a Flutter developer, so focusing only on the Flame specific features like you´ve been doing resonates with my needs. Thanks and keep on the good work!
I am learning flutter in Korea. I appreciate your videos! It's a little bit hard, but I'll try my best. Thank you😊
You are breaking ground in the Flutter/Flame community and showcasing it in an easy to learn way.👍 Thank you!
Glad you think so! Trying my best to figure it out and help other 😁
ちょうどFlutter/Flameの勉強をしたかったので、とても参考になりました！
ありがとうございます。
これからも動画楽しみにしています
This is a great series, I´m really enjoying how simple and practical your approach is, coding along line by line without crazy copy pasting or pre-coded files. I am already a Flutter developer, so focusing only on the Flame specific features like you´ve been doing resonates with my needs. Thanks and keep on the good work!
I'm glad you're enjoying the series so far. Yea I always hated tutorials where they copy paste a lot, like umm what does that do and why. I'm still working on having a good structure, I work out this code before hand sometimes takes hours to figure out something then struggle to remember the order I did it, so I've started taking notes while coding
@@Spellthorn another thing I forgot to mention: displaying your keyboard input on the recording while typing is a great touch, really helps catching those keyboard shortcuts
Yea I was glad I found that tool definitely helps out as I do use a lot of short cuts, sometimes I forget to turn it on though and realize later
I was waiting for this video, Amazing work. There are some videos available for flame and flutter together but most of them are outdated. Iam working on a 2D game and this series has been a very helpful tool for my work. Thanks 🙏
I'm glad they have been helpful, that's why I wanted to make the series as I felt stuck when trying to learn flame myself
Finally! I was eager to see this part 😍
I't gonna be a great evening today 😁
Yes, it was a long time coming 🤣 hoping the rest will be easier 😁
This series is absolutely BRILLIANT! Thank you
Thank you 😊 glad you're enjoying it. Next episode will be out tomorrow 😁
Thank you for that videos! It's easy to learn by them!
Just a tip: Flutter has geometry classes like Rect that has a method called 'overlaps()', and you could create rects and check if they overlap each other easily.
Hmmm I wonder how that would work, thanks 😊
This was definitely a long one but i'm really glad you were able to figure it out!
Yes, I'm glad too 😁
Thank you very much for the effort you put in
Glad you enjoyed it! 😊
I'm late to the party but great tutorial so far! I've learnt a lot about Flame from your videos. If you want to shorten your code a bit in 19:00, now you can make use of extension helper getters provided
_final platform = CollisionBlock(position: collision.position, size: collision.size, isPlatform: true,);_
Thank you for this tutorial :)
Finally 🎉🎉🎉🎉 this is better than expected
Sorry for the delay. Definitely was a rough road. But feel great coming out on the otherside. 😁
So goooooooood. Thnx for upload about flame video things.❤
Glad you enjoy it! We have a lot more to do 😁
the issue of Player getting pushed outside the game frame was resolved by checking the update order. Proper ordering of update operations is crucial in game development to ensure that each step is executed in the correct sequence.
how can i fix it, my player is going out of frame
Hello sir. Thank you for the great tutorial..but..how can I do a player double jump? I tried to figure this out, but when the player pressed the "space" button to trigger the jump function...the game engine continued counting until the player returned and touched the ground...so I was not able to add an int variable to count the number of presses on the "space" button. Although in the "hardware_keyboard" class
There are Event like "KeyDownEvent" and "KeyUpEvent" but I couldn't get any of them to work.
thank you
just wow,thanx for shearing❤❤
Thanks for watching!
Hi, i am not able to jump through the left platforms, but platforms on the right side i dont have any problems with.
Nice series. Just a comment about using super in the constructor. If you are just passing the value through to the super constructor, you can just use *super.position* as the parameter to the constructor. So for example the entire CollisionBlock constructor can just be: *CollisionBlock({super.position, super.size, this.isPlatform = false});*
That's good to know. Thank you 😊
I took your series as my introduction to game development, and I just have to say: Great work! I just had a problem with the collisions with the blocks. I put a block just two tiles above the ground, and when the player jumps below it while running to the right or left, the collision throws the player to the side instead of moving him down. I haven't figured out how to solve it, and I would appreciate any advice. Thank you!
help me out, after implementing vertical gravity whenever i am moving my character it goes straight out of map, i am stuck couldn't figure out the issue
in the update method, make sure that gravity function should be called before vertical collision function
may you get tutorial link for rectangle collisions? 23:39
you can use null aware operator instead of if statement like this:
for (final spawnPoint in spawnPointsLayer?.objects ?? [])
Great to know thanks 😊
Jump in the middle of air is not working. Plz. help
Is there a tutorial for use on mobile for the jump section so you can jump using the jump button?
You can find it on episode 8
thanks for the help 😊
like the other view stated in episode 8 😊
Hi! First of all, thank you very much for this tutorial, it has been great so far. I played around with the Godot engine but I felt without control of many things so I'm giving a try to Flame.
My question is about the collisions, I'm wondering why didn't you use the HasCollisionDetection mixin from Flame. Maybe I missed the explanation from the video, sorry if that was the case.
Thanks again for your effort and for sharing it!
I'm glad you're enjoying the series. I've used godot before but yea definitely liking Flame.
So the reason that we didn't use the built in collisions is because you're always colliding which causes many errors so it was easier to check the horizontal collision first, then apply the gravity then check vertical collision rather than the built in collision always checking it. There's probably a way to use the built in collision but I tried figuring it out for weeks so just gave up 🤣 in the future episodes we do use the built in collision though 😁
@@Spellthorn Thanks for your answer! Glad to hear that you are using it in following episodes (because I paused your video and went to the docs to use the mixin and now I'm kind of stuck too 😂the player stops but just for a while).
Keep up your good work! 💪
Yea there is a tutorial to use it with a circle hitbox and it works well. But for rectangle hit box it just doesn't work right. So not worth the hassle to figure it out 🤣
@@Spellthorn Finally I made it work well with the rectangle hitbox reducing the box size and a couple of flags to avoid changing the position on the collision. I'll continue with the gravity part hoping that my code will not be that different to yours 🤞
Thats awesome, yea gravity is what breaks everything with the built in collision, let me know if you find a way 😁
What is the "current" variable? from where you take it?
Ist build in from SpriteAnimationGroupComponent
Thanks for your great video! I've learned a lot from your video. However I think I've found a bug about the gravity. You've updated the velocity according to the gravity. `velocity.y += gravity;`. However, just like you mentioned in your previous videos, you should multiply the gravity by dt. Otherwise, our player will jump differently in diffrent fps.
Yea gravity caused me a lot of issues. Never could find out why
I've been stuck on this jump height issue with FPS differences between different phones for three days. You've been a huge help! Thanks for your comment, buddy!
Hi, I have 2 issues: the movement does not work when i press A or D; and may arrows is wrong (its like my keyboard was Landescaped... lol), my Up arrow acts like Right arrow, my Down arrow as Left arrow, my Right arrow as Down, and the Left as Up.
Anyone knows how to solve? :) thanks
While testing the application properly, the character is getting away from the box. It seems it's working perfectly in the video, but in my application, it getting away from the box.
Any suggestions?
When you say getting away from the box what do you mean? What box? Like the player is farther from the object?
its about methods ordering in the update
@@YaxineZone thanks a lot! it's working for me. I didn't notice that🤣
I don't have exp in game development but I can't image it's normal to have the _checkvertical/horizontalCollision() type methods where you loop through ever collision block to check if it's overlapping the character. Isn't there an event listener/callback style way to achieve?
Yea it could be bad but haven't found a better way to check it. It has built in collection ability but that caused way too many issues so went this approach
Just amazing ❤❤
Glad you enjoy them
Great tutorial series I'm really enjoying it! I have an issue when running it as a macos app. When I use the keyboard I hear a system sound on every click. Any suggestion how to overcome this?
Hmm I'm not sure about Mac sorry
thank you for your video!!! but i have a question about my bug. When i start the game, if i press leftarrow button, the player teleport to the lefttop corner ( x: 48 y: 48) and when i press rightarrow button, player suddenly goes out of the map and it falls down out of the screen. I compared all of the codes of mine with your codes on the github but everything is fine. I don't know the reason why this bug happens. Do you know any solutions??
This could be a collision issue as if it collides with bottom first it then moced you to the ends. Make sure your checking horizontal collision first then vertical otherwise this happens
@@Spellthorn In player.dart file, i changed the order of _applyGravity function and _checkVerticalCollisions function in update function and it worked. the _applyGravity function should be the first. Thank you for your answer :)
No problem, I'm glad you were able to fix it
I did everything like you did in the video, but for some reason my character falls down and out of the level. There is no collision.
Nevermind, I fixed the problem.
Glad you were able to fix it 🙂
How did you fix it? Please let me know
Here is how you would use the built in collision detection without making your own: void _checkHorizontalCollisions() {
final playerBounds = toRect();
for (final block in collisionBlocks) {
if (playerBounds.overlaps(block.toRect())) {
if (horizontalMovement < 0) {
position.x = block.toRect().right + playerBounds.width;
} else if (horizontalMovement > 0) {
position.x = block.toRect().left - playerBounds.width;
}
}
}
}
I'll have to try that out thank you
its working thanks
Works well. Thanks. Just a note that although you are using built-in overlap detection, there is a real collision detection system that uses callbacks.
Just a tip, try to discover BonFire, it's completely compatible with Flame, and it provides many helpful functions. It's most used in RPG games, but still it might be useful.
Yea I've seen that, I'm not a huge fan of using other stuff inside other stuff if I can avoid it, too much to keep track of 🤣
@@Spellthorn I'm really excited to see the end version of this game, I'm sure you'll reach a place where you need State Management, storage, etc, that's what I'm looking for.
Also, it would be nice if you present any idea how to make scrollable background, like in your game, imagine if the character can walk left infinitely.
I've implemented scrolling background today actually 😁 also I've done the fruit too. 😁
@@Spellthorn Can't wait to see it 😍
Yea trying to figure out the Saws next 😁
How can I play this game on mobile phone
You can build for my mobile by running flutter build apk then plug in phone and do flutter install
Great work man! Thank you.
I just had a problem, i got same constants than you but my character jumps really high, i dont know why :(
I mean, i adjust the constants but i wonder why is different?
Maybe its because behaves different depending each device, if so, how can we avoid that?
In the video he set the jumpForce to 460 but somewhere along the way (maybe he edited the video) he changed it to 260, i saw the value it in the github project.
I'm pretty sure I break the gravity here so different on different screens etc
i was stuck on it too
Please don't apologies for making an awesome vid long lol
😮I was working on a thrust method of flying a player, I use a joystick component, however the Player doesn't fly towards the initial direction for a little while like any projectile then fall parabolically...but mine is completely stopped when I let go the joystick and gravity takes his soul almost instantly, how do u think I should approach this?
Hmm. To me it sounds like you'd want to decrease your y velocity while holding the joystick so it keeps subtracting more and more. And then if let go then have gravity start. Which should start it at a lower number and increasing making it more smooth. Also clamping the velocity so don't fall too fast
hey man, did you figure out the thrust method? could really use some help
Thrusting up should just be as easy as keep subtracting from your why, while button is pressed. Then stop when letting go and have gravity do the rest.
Something like
If(thrust) {
position.y -= thrustAmount;
}
@@denilsonwashuma1987 nah I didn't solve it, I left another comment in this section.it seems, We kinda need to be the first to integrate our own ironman logic from scratch to Flame
@@Spellthorn Thanks will try it out
The video was amazing, but Im not a good student of physics, velocity, gravity and other stuff are hard to understand. 😄
Im still try to understand them.
I'm glad it was helpful, you'll get the hang of it 😁
I think the guys at Flame could use some of your input 🙂
I'm in their discord, they have been a great help so far 😁
My player is not spawning inside the game frame its getting pushed outside the game frame😥😥
need help it is spawning on top of the game frame
Is gravity causing it when it touches something to move outside the frame? Or when it first spawns is it spawning outside the frame? If its the first one turn off gravity and see if still happens. If its the 2nd one try a different position point
@@Spellthornits the second and i tried different positions but it keeps spawning right above the spawn point on the frame
Do you have the level.dart file correct, where you pass in the player position? Also make sure your passing your position to the super
@@Spellthorn i am having problem like the portion below the vertical frames have become colliding like my player can't go below the frame too. like where ever i keep my vertical frame the portion below i collide
Okay so it seems the error is definitely somewhere with the collisions, I have my code on github, it is a further version then where you are at but I would consider viewing that and seeing where your code may be different at least for the sections to where you are now
Is it possible to create 3d games i.g. FPS games in flutter?
You can make 3D games with flutter although it requires unity. Flame engine is not enough for 3D, it was designed to handle 2D game development.
Flame is mainly for 2d games. You could probably make a 3d looking 2d game though
@@gamerguide325 means I will have to create 3d models in Unity and logic in flutter insted of C# right?
They mean if you want 3d you're better off using a game engine for that like unity. You wouldn't use flutter/flame for that
@@Spellthorn oh, thanks understood
your tutorials are great however refatoring in the middle of the series is extremely annoying
Glad you're enjoying them. Sometimes when coding refactoring will need to be done. If there's a better way to do something, you should do it as early as possible otherwise you wont want to at the end or break stuff later if you do.
Nice series! 🩵
But why do you use switch statements when you don't need to and don't use them when you need to?
And don't ignore type safety please, it hurts to see your dynamic parameters 🙏
Well, I'm a self taught coder so ... I don't always use good practices, I use what works in the moment, and what I feel makes sense. This leads me to doing things wrong a lot in terms of common practices as I don't know what they are, but hey if it works it works right? 😂
@@Spellthorn sure, the main thing is to make it all work, and you do it 🙌
This is a great series, I´m really enjoying how simple and practical your approach is, coding along line by line without crazy copy pasting or pre-coded files. I am already a Flutter developer, so focusing only on the Flame specific features like you´ve been doing resonates with my needs. Thanks and keep on the good work!
Thanks, yea I'm not a fan of copy pasting tutorials either 😊