Learn how to build a beautiful game in Flutter with Flame. In this tutorial, you’ll build a virtual world with a movable and animated character.
I have been looking for up-to-date tutorials on using flame. This is the best tutorial ever. Thank you for doing.
Sticking around for more…
Thank you, I’m glad you like it 
A lot more Flame tutorials are definitely planned!
Is there a good place to learn how to use Tiled as you have used it here? I have been messing around with it but am a bit mystified as to how to setup collisions.
Nice tutorial, was very helpful, Can you let me know if you created the character by yourself or got from some website, I am trying to add some more animations in that spritesheet and include it in the game, If its possible, can you share the link or character editable file as svg or as aseprite file?
Hey,
The collision that has been used in this tutorial is not full tile collision. I drew a rectangle in Tiled overlaying the image for the level, I then took the X,Y positions of each of the four points on the rectangle and added that to my tilemap.json file as a collision object. With that information the code can then loop through those objects, and create a collision object for each one loaded using the same coordinates (check out world collision in the project).
For a complete game, you’d load each tile in and render each tile using a tile sprite map, including the collision overlays, and create the collision objects and intractable objects at the same time. Check out a video course like this: Tiled Map Editor Tutorial Part One: The Basics - YouTube
Let me know how you get on
Hello!
I found the character on a free pixel art website, but I made the sprite sheet myself. You can find the sprite sheet in the starter project under assets.
oh okay, Thank you 
thank you to @vguzzi for writing this excellent tutorial. It is very high quality and is a real contribution to the community. I really enjoyed learning from you.
I have a question about using the stack to overlay the GameWidget and the joystick controller.
I have been trying to figure out when to use the GameWidget Overlay instead of the Flutter stack. I am also interested in an example of the overlay that shows how to use GameWidget() as the top parent widget. The example in the source code uses dashbook and I’m not sure how to just use runApp(GameWidget())
flame/overlays_example.dart at main · flame-engine/flame · GitHub
The only way I can figure how to use the overlay is to put it in a StatelessWidget, but that seems too complex and I might as well use a stack at that point.
Any insight on when to use a stack versus an overlay would be appreciated.
You can see from my example below that I’m not sure how to implement the overlay.
// this works, but seems too complex.
// I am looking for a simpler technique
import 'package:flame/game.dart';
import 'package:flutter/material.dart';
import 'dialog_button.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return overlayBuilder(context);
}
}
class MyGame extends FlameGame {
@override
Future<void> onLoad() async {}
@override
void render(Canvas canvas) {
super.render(canvas);
overlays.add('DialogButton');
}
}
Widget overlayBuilder(BuildContext context) {
return GameWidget<MyGame>(
game: MyGame(),
overlayBuilderMap: const {
'DialogButton': dialogButton,
},
initialActiveOverlays: const ['DialogButton'],
);
}
Is there a performance penalty for loading each tile for the underlying map individually? Or, is this the best practice? I am new to this type of concept.
I’m interested in more examples with flame_tiled.
This tutorial by @vguzzi is the best on the Internet that I’ve seen. Thanks.