Recreating Super Mario Bros. with Flutter & Flame | Step-by-Step Tutorial | Part One 🍄 🎮 🔥
HTML-код
- Опубликовано: 12 июн 2024
- Flame is a 2D game engine built on top of Flutter, and today, I will be demonstrating how to remake one of the most memorable video games to ever bless a console, Super Mario Bros for the NES.
The focus for this tutorial will be about creating maps in Tiled.io, the small Mario player, the Goomba enemy, the Brick Block, The Mystery Block, and the pause feature.
Let me know in the comments what you think about making games with Flutter and Flame.
CHAPTERS
0:00 - Intro
1:19 - Shout Outs
2:01 - Game Premise
3:15 - Setup
7:12 - Create Map in Tiled.io
9:58 - Import Map in Flutter
12:17 - Use CameraComponent for Viewing Map
15:55 - Create Level Component
20:34 - Add Platforms in Tiled.io
21:54 - Add Platforms in Flutter
26:52 - Add Mario in Tiled.io
28:00 - Add Mario in Flutter
34:42 - Add Gravity and Collisions to Mario
46:16 - Add Movement to Mario
55:49 - Add Jump Ability to Mario
59:47 - Update Mario's Animation
1:03:01 - Add Goomba in Tiled.io
1:02:43 - Add Goomba in Flutter
1:06:22 - Add Movement to Goomba
1:09:01 - Apply Collision Detection to Goomba
1:11:49 - Create Game Block Class
1:18:06 - Add Blocks in Tiled.io
1:20:28 - Add Mystery Block in Flutter
1:23:22 - Add Brick Block in Flutter
1:25:59 - Add Pause Feature
1:28:09 - Outro
View Source Code For This Project Here : 👇
github.com/trey-a-hope/SuperM...
Download the Flame Package Here : 👇
pub.dev/packages/flame
Download the Flame Audio Package Here : 👇
pub.dev/packages/flame_audio
Download the Flame Tiled Package Here : 👇
pub.dev/packages/flame_tiled
Follow DevKage RUclips Channel Here : 👇
/ @devkage
Learn More About the Flame Engine Here : 👇
flame-engine.org/
Download the Tile Editor - Tiled.io Here : 👇
www.mapeditor.org/
View Apps That I Have Developed In Flutter Here : 👇
Android:
play.google.com/store/apps/de...
Apple:
apps.apple.com/us/developer/t...
Connect With Me:
Linkedin:
/ trey-hope. .
GitHub:
github.com/trey-a-hope
➡️ ➡️ SUBSCRIBE:
Thank you for watching!
#treycodes
#flutter
#flame
#gamedevelopment
#mario 
Наука
I was really waiting for this video remake! can't wait to watch it!
Thank you, I’m sure you’ll be pleased.
I really loved the video , I have been working on flame 2 months ago and this video help me a lot especially when the camera follow the player I have been struggle with for long , and also I loved the idea of adding full level image Instead of create it in tiled thank you so much 🙏
Of course, glad the video was helpful for you.
This is amazing stuff and incredibly helpful, thank you so much!
Of course, glad it could help.
Thanks a lot for taking my words on lowering the background music! Many thanks ❤
Maybe next you can start showing us how can we integrate State Management (Bloc for example?), that would be amazing!
Thank you for the suggestion. And I can look into that.
Great job
Thanks 🙏🏾
Super cool, can't wait for other videos! Just one note: the game is from NES, not for SNES 😊
Great catch, thank you for that!
Hey man great video, yours is trully the most up to date tutorial i could find, i subscribed in case you upload more, just a heads up tho, the github page for your code is down or privatized :( hope it didnt got nuked.
Hey thank you for watching! I just updated the GitHub page to be public, i must’ve left in on private while developing accidentally.
Hi there, thank you for this video! where is part one? i can t find it..
Recreating Super Mario Bros. with Flutter & Flame | Step-by-Step Tutorial | Part Two
Hey there, this is part one. I haven’t made part two yet.
@@TreyHope ok, thanks. I just saw at the end part two.., thank you!!!
I have an issue "when the player stands at the edge of the block, it falls from the block and sometime it is hard to climb to the block." How can i fix it.
Which block are you referring to exactly? The platform Mario stands on or one of the mystery blocks that he bumps?
@@TreyHope The platform Mario stand on
@@kyawnai I did have problems with exact positioning on the platform that I was not able to solve. I am redoing this project in bonfire though which provides better platforming which should solve this issue. My apologies.
Can you please make a brick breaker ball game tutorial ?
Thank you for the suggestion; I’ll add that to my list💡👍🏾.
ara you remove part one from your channel?
This actually is part one, I realized I mis titled this video part 2 lol
@@TreyHope