Beating Levels! | Create an Amazing Game with Flutter & Flame
Вставка
- Опубліковано 6 сер 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/
#flutter #flame #gamedev
Welcome to Episode 7 of our enthralling game development tutorial series, "Beating Levels- Create an Amazing Game with Flutter & Flame"! In this action-packed installment, we're elevating your game to new heights by implementing crucial checkpoints and enabling players to progress to the next level, all powered by the dynamic combination of Flutter and Flame.
As we dive into this exciting episode, we'll show you the ins and outs of checkpoint integration. Learn how to strategically place checkpoints throughout your game levels, providing players with a sense of accomplishment and security as they advance through your captivating gameplay.
The importance of creating seamless player experiences cannot be understated, and that's why we'll guide you through the process of designing intuitive checkpoint mechanics. From saving player progress to handling respawn points gracefully, you'll master the art of crafting a flawless gaming journey.
But wait, there's more! Our tutorial will demonstrate how to add a dash of creativity to your checkpoint system. You'll discover how to incorporate interactive elements that not only aid players but also enhance the overall immersive gameplay.
As we delve deeper, you'll gain valuable insights into playtesting and fine-tuning your checkpoints. Balancing challenge and reward is a delicate task, and we'll equip you with the know-how to strike the perfect equilibrium, ensuring your players feel challenged yet encouraged to conquer each level.
Throughout this episode, our step-by-step explanations and practical demonstrations will empower you to implement this essential game feature seamlessly. Whether you're a seasoned developer or just starting, our goal is to make checkpoint integration accessible and enjoyable.
By the end of this tutorial, your game will boast a sophisticated checkpoint system that leaves players eager to progress further, hooked on the thrilling challenges you've prepared for them.
If you're as thrilled as we are about these game-enhancing mechanics, be sure to show your support by liking this video and subscribing to our channel. We have many more exciting tutorials in store for game development with Flutter and Flame, and we can't wait to share them with you. Have any questions or ideas? Share them in the comments below; your feedback is invaluable to us!
Stay tuned for the next video, where we'll explore another essential aspect of game development: creating stunning visual effects that will truly captivate your players. Get ready to unleash your creativity and take your game to extraordinary levels. 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...
||||||||||||||| 233% ||||||||||||||| 4.66K/2K
Most recent subscriber: jtcdarkstar darkstar
@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/ - Навчання та стиль
I've just picked up this series, it's so informative and easy to follow, thank you!
Welcome! I'm glad you are enjoying the series so far 😊
I'm still watching and following along. Thank you. Great job on the videos; you deserve more subscribers.
I appreciate that I'm glad you're enjoying it so far!
Thank you for this great playlist! I really like you're showing the Tiled app and how to use it with Flutter + Flame. 😃
You're welcome yes tiled is a great resource when making these games, glad you're enjoying the series!
Thank you for thie really nice tutorials. And for thoes who have same error message when transitioning to other levels,:
"Field 'cam' has already been initialized."
Just fixing like this(Declaring "cam" inside function) fixed my issue :
void _loadLevel() {
Future.delayed(const Duration(seconds: 1), () {
Level world = Level(
player: player,
levelName: levelsNames[currentLevelIndex],
);
CameraComponent cam = CameraComponent.withFixedResolution(
world: world,
width: 640,
height: 360,
);
cam.viewfinder.anchor = Anchor.topLeft;
addAll([cam, world]);
});
}
go on bro, that is awesome
Glad you enjoyed it
Amazing Playlist, just ran into it a few days ago, watched the first vid and it was well structured and detailed.
Just wanted to leave a comment to give you some ideas for this great series
1. Add a level progression map where you could play a level again or go to the next level by completing the previous one like angry birds, candy crush
Unlocking levels via candies or fruits
(You can find free 2d map tiles on itchio, gameart2d, craftpix)
2. Character switching menu or a fruit that can change your character
3. Give characters special abilities like super speed while another might have triple jump, etc ...
4. Add zombiesss because ... zombiesss yk 🤔
5. Joystick support for mobile
6. Power up fruits, these can be timed or permanent
7. High value disappearing fruits
8. Health bar and candies counter (or rather candies bar)
9. How amazing it would be to have a multiplayer too
10 . Infinite side scrolling map
11. JETPACKS
12. Ladders
....
I'll Keep adding more replying to this comment, other people can join in too, Thanks 🙂👍
I'm glad you're enjoying the playlist so far. You've mentioned some great ideas thank you. I will be adding in the level select, player select screens and mobile controls for sure not sure about all the other stuff though but we will see
@@Spellthorn number 10 would be great!
Great work as usual,
maybe next you could do camera movement and sounds 💯
I don't think I'll be doing camera movement with this game as the game design normally shows just 1 screen at a time. I definitely will be doing sounds though and will do camera movement in a future tutorial series
Looking forward for that series!!!@@Spellthorn
Can someone please explain why are we using 'Items/Checkpoints/Checkpoint/Checkpoint (No Flag).png' as path and not just 'Checkpoint (No Flag).png' in the checkpoint.dart as we have added assets/images/Items/Checkpoints/Checkpoint/ in the pubspec.yaml file.
Hi! Now I'm up to date. Apart from the animationTicker that I did comment in previous videos, I'd just add that for the checkpoint flag use case, it could be better to use the onCollisionStart instead onCollision given the first one is called only once.
About ideas for new content, I agree with others about the camera movement for bigger maps, HUD for life and collectibles, audio, splash screen, save/load, enemies/bullets (maybe exploring ray-tracing can make it more interesting) and finally, I've read some good comments about Rive for animations and they have a bridge package for Flame, this could be interesting too.
Great work so far, thank you very much!
Congrats on catching up 😁 onCollisionStart would make a lot of sense 🤣 my next vidoe is adding mobile controls (jump button mainly) and then tweaking our delta time for our physics as isn't correct on different devices. After that I do want to do sound just have to find good sounds or make them with sfxr and then I may look into adding enemies, definitely want to do level select and Player select screens, as well as end level screens so yea lots to do. Also want to branch out into making a top down adventure game too, so many things
@Spellthorn Cool! Remember to remove all those Duration with the assistance of the animation ticker 👌🏽
Yes ill have to fix that too. Since you're good at fixing errors. Can you see how you would make it so my scrolling background is always perfect even on resizing window haha drives me nuts lol
@@Spellthorn Thank you for your confidence! I'm not sure if it's the answer you'd want, but I was checking and seems pretty straightforward to use the Parallax component for that. I was able to recreate the background behavior just changing the onLoad method of the BackgroundTile component to this:
parallax = await gameRef.loadParallax([ParallaxImageData('Background/$color.png')],
baseVelocity: Vector2(0, 20),
repeat: ImageRepeat.repeat,
fill: LayerFill.none,
);
priority = -10;
Also extends ParallaxComponent instead.
In the level just change the private method to add the the parallax as any other component.
Hope it helps.
BTW, did you check my comment for video 6 about the reset? Seems like another advantage of the ticker.
I will have to give that a shot I assumed there might be an easier way but when I thought of Parallax it always seemed to be used for normal parallax and not what I was attempting to do. I'll have to check out your other suggestion as well
Great tutorials ever! Thanks. I suggest a shooting enemy, please.
I did want to make one but got busy
Still watching this so far... Third time to grab all the ideas 🧐
Nice, I'm glad its helping you 😁
Great videos!!! May I suggest a way to display in debugMode only the RectsangleHitBox and not the entire rectangle of the object? When you add(RectngleHitbox())....you can use cascading operator '..' on the rectanglehitbox:
add(RectangleHitbox()..debugMode=true) and also set a color (so every class has its color):add(RectangleHitbox()..debugMode=true..debug.color=Colors.orange) (Colors.from material or build a const Color using Color.fromARGB)
Glad you enjoyed it. That is awesome, I didnt know that is something we could do because that would be very helpful to avoid seeing the image size. Thanks for the great advice 😁
I added a shooting mechanism to my Player - a Bullet class. But passing my players location.x and location.y doesn't seem to work. My Bullet spawns on some different x and y axis than my player is on. Any reason why that could be or how to fix? Thanks for the videos.
Make sure you're using position.x and position.y also we flip our character when going left or right which will change its x location so make sure offsetting thst by checking the scale.x.
Let me know if need anymore help
sorry for the new comment.
i finished the tutorial, thanks man awesome !!
But im running into a problem after i beat the 1 level.
the second level is loading, but my player isnt spawning and i have the last diappear animation on the screen on the spawnpoint.
I downloaded your code and copared ALL files, and there is no difference.
i dont know whats the problem, everything works, just the jump into the new level / loading does not work.
i added the removewith.... like i said i comapred the files. its wired :(
Hmm. If code is identical maybe it's the tiled map? Maybe you aren't adding the player spawn?
Could you assist in creating a scenario where a player can defeat a smaller enemy by jumping on it, incorporate boss fights reminiscent of "Super Mario," and introduce a mechanic where the player gains abilities, such as fire, to defeat specific enemies? Additionally, I'm aiming to design a level that extends beyond the screen's dimensions, with a dynamic camera that tracks the player's movement.
I did notice that the artist made another update for these tilesets with enemies etc, so that may be something I will incorporate in the future. I'll look into the dynamic camera as well as others have asked for that too. As for the abilities that could be as simple as just coding the logic you want to have and then toggle with a bool hasFireAbility for example and then if true can do those abilities and if false cannot. Thanks for the great comment
A suggestion: for defeating an enemy you could reuse the collision logic from the platform blocks and the dissapearing logic from the fruit
Yea ill probably do a check if play y is less than enemy y (aka jumping on) to destroy enemy, otherwise player gets hit
I'm really not an expert at this, so take this with a grain of salt, but instead of waiting 3 seconds for the world to be removed, I think a more clean way is to await on world.removed. This is what I did and it seems to work quite well. I also removed the cam because of the way I implemented things, but I'm not sure about the way you did it.
// Remove the current world from the component tree
remove(world);
await world.removed;
remove(cam);
await cam.removed;
That's actually really good to know, and probably a better way to do it for sure. I too am still learning Flame 😄 and my code isn't always best practice just, it worked so I moved on lol
Thank you for you video but i have a question. When player reached the checkpoint the error
_AssertionError ('package:flame/src/components/core/component.dart': Failed assertion: line 577 pos 7: 'child._parent == null': Instance of 'Player' cannot be added to Instance of 'Level' because it already has a parent: Instance of 'Level')
comes up. What is the problem?
same thing
try to remove player from parent
void _loadLevel() {
if (player.parent != null) {
player.removeFromParent();
}
Future.delayed(const Duration(seconds: 1), () {
Level world = Level(
levelName: levelNames[currentLevelIndex],
player: player,
);
cam = CameraComponent.withFixedResolution(
world: world, width: 640, height: 360);
cam.viewfinder.anchor = Anchor.topLeft;
addAll([cam, world]);
});
}
@@gnmgnomski3579 Thanks, it works. But i think the same thing happens with the backgroundTiles and saw ,,, etc so i have to destory the level-01 and then add the level-02 again thank you :)
@@gogu2120 I have a phantom collisions at the next levels, and I don't know why. I don't see any collisions with debugmode on, but sometimes if (other is Saw) _respawn() was triggered, maybe this is due to an existing instance
@@gnmgnomski3579 Me too. There is no saw in my Level-02.tmx but player dies exactly the same place of the saw in level-01. It should be fixed
i would like to have the solution, that i need to collect all fruits , to complete the level.
Has Someone done this ? or knows how i can implement it ?
thanks
Should be pretty simple, could have a check of all fruit when building level.
Each time collect fruit add to collectedFruit
Then check if collectedFruit equals levelfruitcount
If so. beattLevel = true;
@@Spellthorn i think im running in a little problem. on level im checking how many fruits they are, on the player on the collision if other is fruit im adding an integer collectedFruit +1 (here sometimes if im to fast, its counts double). But now, how can i get the information from player that collectedFruits are collected into the level.dart ? think im doing smth wrong :D
❤
Love it. gg
Thanks 😊
hi! I have a problem
I create another level, but the saw in the first level kills the player even though it is hidden. If I move to its location I die.
I had this issue before too because it's not resetting the level properly, I fixed that issue in the video though
Make sure you add the line "removeWhere((component) => component is Level);" in the loadNextLevel() function 35:28
@@Spellthorn
I saw it, thanks its work.
@@nguyenquockhanh3781 i did this, but on my next level my player dont appear, and i have the disappear animation on the last frame showing. dunno what to do. can u help ?
This tutorial has been so helpful. Like Ive been able to do this part on my own. Thats big considering this is the first flame series Ive watched. Thanks🫡
I'm glad. Flame can become super confusing at the start but then you start to realize it's a lot of the same and becomes easier.