Create an Amazing Game with Flutter & Flame
ฝัง
- เผยแพร่เมื่อ 14 มิ.ย. 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/
Welcome to this comprehensive tutorial on building your own game using Flutter and Flame! In this video, we'll guide you through the process of creating a captivating game from scratch, utilizing the power of Flutter's UI framework and Flame's game engine.
Whether you're a beginner or an experienced developer looking to explore game development, this tutorial is perfect for you. We'll start by introducing Flutter and Flame, highlighting their capabilities and how they work together to create dynamic and interactive games.
Throughout this step-by-step tutorial, we'll cover the essential aspects of game development, including game loops, rendering graphics, handling user input, and managing game states. You'll learn how to create engaging animations, implement collision detection, and incorporate sound effects to enhance your game's overall experience.
To ensure your success, we'll provide clear explanations and demonstrations of each code snippet and concept along the way. By the end of this tutorial, you'll have a fully functional game built with Flutter and Flame, ready to be deployed on multiple platforms, including Android, iOS, and web.
Whether you're interested in building casual games, puzzle games, or even more complex genres, this tutorial will equip you with the knowledge and skills to turn your ideas into reality. Get ready to unleash your creativity and join the exciting world of game development with Flutter and Flame!
Don't forget to like the video, subscribe to our channel for more exciting tutorials, and share your thoughts and questions in the comments section below. Let's dive into the world of game development 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: Tobias Flores
@Spellthorn is a talented web/mobile developer who is dedicated to helping others improve their coding skills. Through their TH-cam channel, they create informative and engaging videos that cover a wide range of programming topics. - spellthorn.com/ - แนวปฏิบัติและการใช้ชีวิต
A reminder to everyone that is doing this tutorial now, there is no need to create a separate `CameraComponent` anymore (called `cam` in here), since there already is one included by default on `FlameGame`. :)
Great update, thanks
bro is it working ?,i am asking this coz recently flutter got updated right
This was fantastic! I'm just starting to learn Dart/Flutter and game design, so I'm excited to see this playlist as it progresses!
I'm glad you're enjoying it. Flutter is a lot of fun, I'm still trying to figure out everything with flame myself. 😁
The best tutorial on developing games with flutter. Iam excited for the next videos in the playlist. Definitely deserved like and sub :)
Glad you liked it! 😁
This is well explained and just what I was looking for. Getting back into Game design after years. Thanks Spellthorn!
Glad I could help!
Fantastic. Looking forward to the rest of the series. Thanks for the tutorials.
Glad you like them! I'm excited to make it a game 😁
Episode 2 is live now 😁
Almost 6 months ago, I learned mobile app development using Flutter,
After that I searched for game development using Flutter, but didn't get any Tutorial.
But few days ago, I found this Awesome Tutorial and this Tutor is amazing
Have complete knowledge of what he is doing.
Im exciting to continue in this journey.
Thank you, Sir
You're welcome. I also struggled with this for about a month which is why I wanted to make the tutorial, I'm glad its helping 😊
Thank you for this amazing tutorial. You have a lot of contributions on me. This is awesome!
I'm glad you enjoyed it 😊
If the autocomplete isn't working, you can press 'Ctrl+ Space'. Doing so will give you the suggestions if avaliable. The tutorial is very nice though.
Thanks for the tip! Glad you enjoyed it 😁
This is a very nice tutorial and explanation. I am excited to finish the tutorial and do something fun.
I'm glad you're enjoying it. I've made a lot of progress videos so far to help you, next one comes out tomorrow morning 😀
you offered me massive help. Thanks dude!
Glad I could help!
I really love this tutorial. I'm quite new to flutter as I was originally a Javascript developer, but I wanted a different programming language mainly for games as Javascript sometimes doesn't work properly.
Personally I feel JavaScript has its benefits of Flame but still is fun
Great topic and so well explained! Looking forward to the rest of this series.
Glad you enjoyed it! Yea game development is quite fun when you know what you're doing. It definitely took me awhile to understand it but now its starting to click 😁 so wanted to help others since there weren't many tutorials and some of them confused me more lol
Episode 2 is live now 😁
Brilliant tutorial!
Thanks 😊
thanks bro amazing tutorial very good quality and lot of time for that I guess, so respect, you are a good man helping people!!! btw I love ur laugh AHAH
You're welcome! And thanks 😂
I'm just starting this tutorial and it looks awesome, I'll drop a review when M done
Enjoy 😊
thank u very much for this playlist of video this help me so much
I'm glad, you're enjoying it. This is only the beginning, enjoy
amazing tutorial!
Thank you!
✅Awesome video, simple and easy to understand.✅
Glad you liked it
Omg thanks for this! I ❤ u
You're welcome! Glad you're enjoying it, there's a lot of videos available for you to watch 😁
That's really cool tutorial , thank you very much
You're welcome, episode 2 is already up if you want to check that out too 😁
@@Spellthorn I will 😀
I appreciate it. I hope you like it 😁
Hi there! Awesome video, greate job! Could you plz tell me what theme are you using for your vs code?
Umm, I think I'm just using material theme
amazing! thanks so much
Glad you like it!
SO AMAZING
Thanks 😊
i always like your videos🖤
I appreciate that 😁
This could be good because I have worked on adding ui to java libgdx game before and it is so much work to do it well.
amazing 👍👏👏👏
Thanks a lot 😊
Bro i am not able to able to get the game layout on my phone can you help?
Hai great tutorial, but got stuck at the "LateError: Field 'cam' has not initialized". anyone face this error before
Thank you
You're welcome
Thank you for your engaging tutorial. For handling physics and collisions, I utilized Flame's built-in collision system. But, I cannot put the link to the project here!
Did you use a circle hit box or a rectangle hit box? I was able to use the collision detection with a circle hit box but when it came to a square hit box I could never figure it out so went the different approach
@Spellthorn no it is rectangle hit box
Oh that's awesome
what tools to have keyboard typing capture like that?
the tool is called KeyViz
I have a quick question. As someone with no prior experience in game dev and some experience in flutter, I'm eager to create my own
game, but I'm unsure about the best approach. Should I follow your tutorials and recreate the game as you've demonstrated, or would it be better to use different assets and create my own game while following the general principles you've covered?
That's a great question. I feel a lot of people learn differently, I think following along with this tutorial and accomplishing what I make in the video would be very helpful to learn the basics etc and can start branching off where you feel is fit for your idea and vision. You could also just use this as a guide for different sections that you may be coming across, like my episode where I do sound, or my favorite one, where I make the enemy chicken.
There's no wrong way to get started, also I would ask what your goal with having a game made with flame is, as if your goal is just making a video game I would say godot may be a better fit for that. For me flame was interesting cause I love flutter, but in terms of actually making a good game I feel like Flame may have been much harder way to accomplish the same thing in say Godot.
Hope this helps, and good luck on your journey 😊
@@Spellthorn Thanks a lot!
How can I make the camera have a viewport that is a fixed aspect ratio and still have the camera follow the player. Im trying to make my game responsive but Im having trouble with this :(
This shouldn't be too difficult, you would pass in the players location to the camera
I want your help to load large map in flutter flame can you help me
Cannot get mine to work. I think it has to do with the Camera. Can someone please show the updated code from 26:35. Thanks.
Sorry to hear about that. I believe a lot of people are running into some issues due to a future update or something. I think someone in the comments may have a solution
nice video
Thanks 😊
i was wondering why flame not expanding to 3D as well...this libs is nice and easy to use (at least for me).
Well this would be a 2d engine, you can fake 3d like they did back in the day, but just a 2d engine for now
Can we make the game for desktop with this?
Yea, Flutter makes cross platform easy.
i have a question how to add levels ?
We add more levels in episode 7
I tried to follow the turtorial, but I just cannot get the CameraComponent.. seems like they have changed the Api to Camera and Viewport.. can you please update on how to solve it?
Can you show me what you have? This tutorial still works perfect in new update of flame
@@Spellthorn I really just follow whats in shown.. but CameraComponent just won't work:/
Can you copy paste the code here ill see if anything wrong
@@Spellthorn
import 'dart:async';
import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:pixel_adventure/Levels/level.dart';
class PixelAdventure extends FlameGame {
late final CameraComponent cam;
@override
Future? onLoad() {
return super.onLoad();
}
}
Error>
Undefined class 'CameraComponent'.
So late is expecting you to add the camera later like in the onload. Which I don't see you are doing
or-THAH-gah-nawl -- great video
Thanks 😊
more game tutorial!!!!
Have you watched the series?
yes, it is cool!@@Spellthorn
Wondering if anyone has figured out how to get the level to load, I am getting the same error that @spellthorn gets in the video at 23:41. The problem is changing the assets is not working like it did in the video so either something has changed in the code for TiledComponent or there is another change needed to make it work.
class PixelAdventure extends FlameGame {
@override
FutureOr onLoad() {
world = Level();
camera = CameraComponent.withFixedResolution(world: world, width: 640, height: 360);
camera.viewfinder.anchor = Anchor.topLeft;
addAll([camera, world]);
return super.onLoad();
}
}
class Level extends World {
late TiledComponent level;
@override
Future onLoad() async {
level = await TiledComponent.load('Level-01.tmx', Vector2.all(16));
add(level);
return super.onLoad();
}
}
flutter:
uses-material-design: true
assets:
- assets/tiles/
- assets/images/Terrain/
So, funny story, I just switched to run on Windows and it works. Won't work on Android, even after uninstalling the app and deploying again????
glad you got it sorted out
very weird not working on android, hmm
Bob Ross moment @15:28
🤣
hey im not gettin any image on the screen dont know what am i doing wrong and im not getting any error this is my code
class PixelAdventure extends FlameGame{
@override
Color background() => const Color(0xFF211F30);
late final CameraComponent cam;
final world =Level();
@override
FutureOr onLoad() {
cam = CameraComponent.withFixedResolution(world: world, width: 640, height: 360);
cam.viewfinder.anchor= Anchor.topLeft;
addAll([cam,world]);
return super.onLoad();
}
}
This section doesn't necessarily look wrong. Is the background color working if you change colors? What does your level file look like?
I had the same problem. My mistake was that y didn't add the TiledComponent in the method onLoad() inside the Level class.
@@Spellthorn I am facing the same issue. The background color is working if it changed but the image is not loading. Can see an exeption like 'E/flutter (15912): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Unable to load asset: "assets/images/../images/Terrain/Terrain (16x16).png".
E/flutter (15912): The asset does not exist or has empty data.'
i am so excited to learn this project
Hope you enjoyed it 😊