Create an Amazing Game with Flutter & Flame

Поделиться
HTML-код
  • Опубликовано: 29 янв 2025

Комментарии • 122

  • @LukasKlingsbo
    @LukasKlingsbo Год назад +42

    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`. :)

  • @crazyvolt1660
    @crazyvolt1660 Год назад +11

    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

    • @Spellthorn
      @Spellthorn  Год назад +3

      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 😊

  • @blakefarnsworth
    @blakefarnsworth Год назад +22

    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!

    • @Spellthorn
      @Spellthorn  Год назад +4

      I'm glad you're enjoying it. Flutter is a lot of fun, I'm still trying to figure out everything with flame myself. 😁

  • @crazybazy7938
    @crazybazy7938 Год назад +5

    The best tutorial on developing games with flutter. Iam excited for the next videos in the playlist. Definitely deserved like and sub :)

  • @SecondaryEmail-z8b
    @SecondaryEmail-z8b Год назад +16

    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.

    • @Spellthorn
      @Spellthorn  Год назад +1

      Thanks for the tip! Glad you enjoyed it 😁

  • @GoGoJoeShow
    @GoGoJoeShow Год назад +2

    This is well explained and just what I was looking for. Getting back into Game design after years. Thanks Spellthorn!

  • @abidibnazam4462
    @abidibnazam4462 5 месяцев назад

    This is amazing man, don't stop making these videos

  • @zianjohnillustrisimo9375
    @zianjohnillustrisimo9375 Год назад +2

    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.

    • @Spellthorn
      @Spellthorn  Год назад

      Personally I feel JavaScript has its benefits of Flame but still is fun

  • @karansayata7447
    @karansayata7447 Год назад +4

    Fantastic. Looking forward to the rest of the series. Thanks for the tutorials.

    • @Spellthorn
      @Spellthorn  Год назад

      Glad you like them! I'm excited to make it a game 😁

    • @Spellthorn
      @Spellthorn  Год назад

      Episode 2 is live now 😁

  • @tacowaco
    @tacowaco Год назад +7

    Great topic and so well explained! Looking forward to the rest of this series.

    • @Spellthorn
      @Spellthorn  Год назад +2

      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

    • @Spellthorn
      @Spellthorn  Год назад

      Episode 2 is live now 😁

  • @AbdelwahedEloued
    @AbdelwahedEloued Год назад

    I'm just starting this tutorial and it looks awesome, I'll drop a review when M done

  • @MartinGuillon_GPlay
    @MartinGuillon_GPlay Год назад

    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

    • @Spellthorn
      @Spellthorn  Год назад

      You're welcome! And thanks 😂

  • @egehandastan9513
    @egehandastan9513 Год назад

    Thank you for this amazing tutorial. You have a lot of contributions on me. This is awesome!

    • @Spellthorn
      @Spellthorn  Год назад

      I'm glad you enjoyed it 😊

  • @haseebkahn4811
    @haseebkahn4811 10 месяцев назад

    you offered me massive help. Thanks dude!

    • @Spellthorn
      @Spellthorn  10 месяцев назад

      Glad I could help!

  • @talhasezer4
    @talhasezer4 Год назад

    This is a very nice tutorial and explanation. I am excited to finish the tutorial and do something fun.

    • @Spellthorn
      @Spellthorn  Год назад +1

      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 😀

  • @AykutKlc
    @AykutKlc Месяц назад

    The minimal app's (iOS release) size is 25MB. Can this be reduced? It's a bit massy for an app that does nothing.

  • @NaughtFound
    @NaughtFound 11 месяцев назад

    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!

    • @Spellthorn
      @Spellthorn  11 месяцев назад

      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

    • @NaughtFound
      @NaughtFound 11 месяцев назад

      @Spellthorn no it is rectangle hit box

    • @Spellthorn
      @Spellthorn  11 месяцев назад

      Oh that's awesome

  • @nandaletro
    @nandaletro 11 месяцев назад

    amazing tutorial!

  • @apeiron-soul
    @apeiron-soul 10 месяцев назад

    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?

    • @Spellthorn
      @Spellthorn  10 месяцев назад +1

      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 😊

    • @apeiron-soul
      @apeiron-soul 10 месяцев назад

      @@Spellthorn Thanks a lot!

  • @MajidMaddah-j8j
    @MajidMaddah-j8j 2 месяца назад

    This is Perfect ThankU so much

  • @Rantsa_Jonathan
    @Rantsa_Jonathan Год назад

    thank u very much for this playlist of video this help me so much

    • @Spellthorn
      @Spellthorn  Год назад

      I'm glad, you're enjoying it. This is only the beginning, enjoy

  • @jimcoles5697
    @jimcoles5697 10 месяцев назад

    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.

    • @Spellthorn
      @Spellthorn  10 месяцев назад

      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

  • @sb-dor
    @sb-dor Год назад

    Hi there! Awesome video, greate job! Could you plz tell me what theme are you using for your vs code?

    • @Spellthorn
      @Spellthorn  Год назад

      Umm, I think I'm just using material theme

  • @Jia-w6z
    @Jia-w6z 4 месяца назад

    Hello, if i choose the device as phone it can't support?

  • @ahmd-salh
    @ahmd-salh 4 месяца назад

    Hey I'm getting this error "Gradle task assembleDebug failed with exit code 1" whenever I try to import flame game .

  • @muhammadissasabbagh1540
    @muhammadissasabbagh1540 Год назад

    That's really cool tutorial , thank you very much

    • @Spellthorn
      @Spellthorn  Год назад

      You're welcome, episode 2 is already up if you want to check that out too 😁

    • @muhammadissasabbagh1540
      @muhammadissasabbagh1540 Год назад

      @@Spellthorn I will 😀

    • @Spellthorn
      @Spellthorn  Год назад

      I appreciate it. I hope you like it 😁

  • @Critique21-x7l
    @Critique21-x7l Год назад

    ✅Awesome video, simple and easy to understand.✅

  • @TYNEPUNK
    @TYNEPUNK Год назад

    amazing! thanks so much

  • @legitjimmyjaylight8409
    @legitjimmyjaylight8409 8 месяцев назад

    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.

  • @41_BenjaminGeorgeVarghese
    @41_BenjaminGeorgeVarghese 11 месяцев назад

    Bro i am not able to able to get the game layout on my phone can you help?

  • @Tear0014
    @Tear0014 10 месяцев назад

    Hai great tutorial, but got stuck at the "LateError: Field 'cam' has not initialized". anyone face this error before

  • @YaryVásquez-s9k
    @YaryVásquez-s9k Год назад

    Omg thanks for this! I ❤ u

    • @Spellthorn
      @Spellthorn  Год назад +1

      You're welcome! Glad you're enjoying it, there's a lot of videos available for you to watch 😁

  • @ProgramasdeBordado
    @ProgramasdeBordado Месяц назад

    Hello
    I'm following the tutorial but it seems that with the latest version of Flutter there are some errors that need to be fixed
    Could you make the source code available, but updating it to fix the problems in the current version of Flutter?

    • @Spellthorn
      @Spellthorn  Месяц назад

      Sorry, I haven't touched this in forever not sure of changes etc 😢

  • @johnwiese5927
    @johnwiese5927 11 месяцев назад

    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/

    • @johnwiese5927
      @johnwiese5927 11 месяцев назад

      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????

    • @Spellthorn
      @Spellthorn  10 месяцев назад

      glad you got it sorted out

    • @Spellthorn
      @Spellthorn  10 месяцев назад

      very weird not working on android, hmm

  • @themediocre_coder
    @themediocre_coder Год назад

    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 :(

    • @Spellthorn
      @Spellthorn  11 месяцев назад

      This shouldn't be too difficult, you would pass in the players location to the camera

  • @darielavila5183
    @darielavila5183 Год назад

    i always like your videos🖤

  • @irhasm.a.4932
    @irhasm.a.4932 Год назад

    what tools to have keyboard typing capture like that?

  • @cuzunali
    @cuzunali Год назад

    amazing 👍👏👏👏

  • @BiggerRadius
    @BiggerRadius 3 месяца назад

    I know this vidoe is old but i cant solve this error. Error while trying to load an asset: Flutter Web engine failed to fetch "assets/assets/tiles/Level-01.tmx". HTTP request succeeded, but the server responded with HTTP status 404.
    there is no eztra assets and i have doen everything the same way. when i add a second assent it teels me the add a second copy of a folder for everything

    • @BiggerRadius
      @BiggerRadius 3 месяца назад

      nvm my assets are just outside flutter

    • @abc33155
      @abc33155 4 дня назад

      @@BiggerRadiusyou can just delete your comment

  • @sujalmistry7677
    @sujalmistry7677 11 месяцев назад

    I want your help to load large map in flutter flame can you help me

  • @ABDTalk1
    @ABDTalk1 Год назад

    Can we make the game for desktop with this?

    • @Spellthorn
      @Spellthorn  Год назад

      Yea, Flutter makes cross platform easy.

  • @icecream-wzsz
    @icecream-wzsz Год назад

    SO AMAZING

  • @AnimeFan-lx3gj
    @AnimeFan-lx3gj Год назад

    Thank you

  • @Kinoseijin
    @Kinoseijin Год назад

    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?

    • @Spellthorn
      @Spellthorn  Год назад

      Can you show me what you have? This tutorial still works perfect in new update of flame

    • @Kinoseijin
      @Kinoseijin Год назад

      @@Spellthorn I really just follow whats in shown.. but CameraComponent just won't work:/

    • @Spellthorn
      @Spellthorn  Год назад

      Can you copy paste the code here ill see if anything wrong

    • @Kinoseijin
      @Kinoseijin Год назад

      @@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'.

    • @Spellthorn
      @Spellthorn  Год назад

      So late is expecting you to add the camera later like in the onload. Which I don't see you are doing

  • @rajehgharbi6264
    @rajehgharbi6264 Год назад

    i have a question how to add levels ?

    • @Spellthorn
      @Spellthorn  Год назад

      We add more levels in episode 7

  • @theman3282
    @theman3282 Год назад

    i was wondering why flame not expanding to 3D as well...this libs is nice and easy to use (at least for me).

    • @Spellthorn
      @Spellthorn  Год назад

      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

  • @Nagimulia
    @Nagimulia Год назад

    more game tutorial!!!!

    • @Spellthorn
      @Spellthorn  Год назад +1

      Have you watched the series?

    • @Nagimulia
      @Nagimulia Год назад

      yes, it is cool!@@Spellthorn

  • @smurfolissicus
    @smurfolissicus Год назад

    nice video

  • @zstrizzel
    @zstrizzel Год назад

    or-THAH-gah-nawl -- great video

  • @ShakeelTariq
    @ShakeelTariq Год назад

    Bob Ross moment @15:28

  • @samuelMontoya-x8q
    @samuelMontoya-x8q Год назад +1

    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();
    }
    }

    • @Spellthorn
      @Spellthorn  Год назад

      This section doesn't necessarily look wrong. Is the background color working if you change colors? What does your level file look like?

    • @jhonatanamortegui5852
      @jhonatanamortegui5852 Год назад

      I had the same problem. My mistake was that y didn't add the TiledComponent in the method onLoad() inside the Level class.

    • @prathibhasathyanjalee5163
      @prathibhasathyanjalee5163 Год назад

      @@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.'

    • @DarshanJethva-ii5bu
      @DarshanJethva-ii5bu 5 месяцев назад +1

      @@prathibhasathyanjalee5163 same im also facing this issue did you resolve it ?

    • @myunlimiteddream
      @myunlimiteddream 4 месяца назад

      @@prathibhasathyanjalee5163 same web is ok but android app occurs error

  • @Abhishek7Shah
    @Abhishek7Shah Год назад

    i am so excited to learn this project