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
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
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
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
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 😁
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]); }); }
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.
when i change switch to next level, components of both levels are overlapped, what possible the issue there, could you please make a video of actually having more than one level and switching them..??
I am having problems with this part of the tutorial. The saw component and the checkpoint coponent is not being loaded in my game when i run the code. All I see if a black screen and I have followed the tutorial by the letter. They just don't show up, the checkpoint or the saws. Could someone help?
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
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
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 :(
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
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?
@@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
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
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.
@@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 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!
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 😊
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!
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
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!
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
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 😁
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]);
});
}
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.
when i change switch to next level, components of both levels are overlapped, what possible the issue there, could you please make a video of actually having more than one level and switching them..??
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 😁
I am having problems with this part of the tutorial. The saw component and the checkpoint coponent is not being loaded in my game when i run the code. All I see if a black screen and I have followed the tutorial by the letter. They just don't show up, the checkpoint or the saws. Could someone help?
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
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?
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
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
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.
❤
Love it. gg
Thanks 😊