Collisions, Jumping and Gravity | Create an Amazing Game with Flutter & Flame
Вставка
- Опубліковано 2 лип 2024
- 📺 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/
🕒 Timestamps
0:00 Episode 4 Introduction
0:12 Refactoring Current Code
9:53 Updating Tiled Level
12:33 Grabbing Collisions from Tiled Level
15:29 Creating Collision Block
18:08 Adding Collisions to game
24:00 Checking Horizontal Collisions
25:50 Creating Collision Detection
32:02 Updating Horizontal Collisions
37:55 Adding Gravity
42:30 Checking Vertical Collisions
46:43 Adding Jumping
50:12 Adding Platform Collisions
54:34 Updating Player State for Falling and Jumping
57:30 Adding Player Hitbox
1:06:05 Finished Product
#flutter #flame #gamedev
Welcome to episode 4 of our thrilling game development tutorial series, "Collisions, Gravity, and Player Jumping | Create an Amazing Game with Flutter & Flame"! In this action-packed installment, we're delving deeper into the exciting world of game mechanics, taking your game to new heights with Flutter and Flame.
First up, we tackle the crucial concept of collision detection. You'll learn how to implement collision detection for your player character and other game objects, ensuring they interact seamlessly with the game environment. Watch as we guide you through the process of setting up collision boundaries, enabling your character to navigate through the game world while interacting with platforms, obstacles, and other in-game elements.
Next, brace yourself for an exhilarating adventure into the realm of gravity. Learn how to apply realistic gravity effects to your player character, making them feel grounded in the virtual world you're creating. With our expert guidance, you'll have your character moving and falling with natural fluidity, creating a sense of immersion that draws players deeper into your game.
But that's not all-we're just getting started! Get ready to witness the magic of player jumping. You'll discover the mechanics behind adding jumping functionality to your character, allowing them to leap over obstacles, reach new heights, and explore the game world in a whole new way. Our step-by-step instructions and hands-on examples will make sure you grasp this fundamental gameplay element effortlessly.
As we progress through the video, you'll gain valuable insights into fine-tuning your character's movements and interactions. We'll explore how to control jump heights, implement double jumps, and create dynamic gameplay experiences that keep players engaged and entertained.
Throughout the tutorial, we provide clear explanations and practical demonstrations, making it easy for you to apply these concepts to your own game development projects. You'll also learn about performance optimization, ensuring your game runs smoothly and efficiently on various devices.
By the end of this episode, you'll have a fully functional and dynamic game character that can navigate the game world with ease, overcome obstacles, and interact with the environment in exciting ways. You'll be well-versed in collision detection, gravity effects, and player jumping mechanics, armed with the knowledge to create captivating games that leave players wanting more.
If you're as excited as we are about these new gameplay mechanics, be sure to show your support by liking this video and subscribing to our channel. We have plenty more thrilling tutorials lined up for game development with Flutter and Flame, and we want you to be part of the action. If you have any questions or ideas, share them in the comments below; we value your input!
Stay tuned for the next video, where we'll dive into level design and start building the world your character will explore. Prepare to unleash your creativity and take your game to the next level. Happy coding, and let's continue our journey to create amazing games together!
🛡️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...
||||||||||||||| 231% ||||||||||||||| 4.62K/2K
Most recent subscriber: Brett Kromkamp
@Spellthorn is a talented web/mobile developer who is dedicated to helping others improve their coding skills. Through their UA-cam channel, they create informative and engaging videos that cover a wide range of programming topics. - spellthorn.com/ - Навчання та стиль
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の勉強をしたかったので、とても参考になりました！
ありがとうございます。
これからも動画楽しみにしています
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 very much for the effort you put in
Glad you enjoyed it! 😊
This was definitely a long one but i'm really glad you were able to figure it out!
Yes, I'm glad too 😁
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 :)
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 😊
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
So goooooooood. Thnx for upload about flame video things.❤
Glad you enjoy it! We have a lot more to do 😁
just wow,thanx for shearing❤❤
Thanks for watching!
Finally 🎉🎉🎉🎉 this is better than expected
Sorry for the delay. Definitely was a rough road. But feel great coming out on the otherside. 😁
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 😊
Just amazing ❤❤
Glad you enjoy them
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.
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 😊
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
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
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
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 😁
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
you can use null aware operator instead of if statement like this:
for (final spawnPoint in spawnPointsLayer?.objects ?? [])
Great to know thanks 😊
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
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
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
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 😁
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🤣
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 😊
😮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 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 🙂
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 😁
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
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
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
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!
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