Introduction to Flame, a 2D game engine for Flutter.
Flame Overview — Lesson #1
Watch the 2:46 minute video below in full screen on YouTube. You do not need to install Flame at this point. Watch the video without typing in the example.
Questions
- How is Flame different from Unity?
- Can Flutter widgets be used in Flame?
- What computer language do you use to write Flame games?
Optional: Using Flutter with VS Code
Required if you are fairly new to developing with Flutter.
Tip
- When placing the Sprite, you may need to use Hot-Restart (uppercase R) and not Hot-Reload (lowercase r)
Install Flame — Lesson #2
Important — This tutorial series is based on Flutter 2.0 and Flame 1.0.
Create Simple Graphic Without Movement — Lesson #3
Move Graphic (Sprite) — Lesson #4
Sprite Animation — Lesson #5
Sprite sheet is here.
Challenge
Overview
- Create your own game using your own animated Sprite using your notes or knowledge.
- Do not follow the videos line-by-line for this challenge.
- Use the videos if you are stuck.
Example
This example was created by a high school student using the videos above and the steps below.
Steps
- Watch the videos again and take notes for the steps needed. If you are experienced or confident, it is okay to skip around the videos to the parts that you are unsure about. If you are new to Flutter or programming, consider watching the full set of videos above again and take notes on the process.
- Get your own sprite. For example, you can use a free sprite from gameart2d.com
- Create your own Flame Game by starting with a new Flutter project. For example
flutter create girl_adventure - Display a non-moving sprite on the screen
- Move the sprite on the screen
- Create a spritesheet of the animated frames using a tool such as GIMP
6. Move the animated character on the screen
Tips
- On GIMP, make sure you uncheck View -> “Show Guides” and check View -> “Show Grid”
Lesson 6 — Adding a Second Game Character
Add Game Background and Platform — Lesson #7
Collision Detection on Animated Sprites — Lesson #8
Move Classes to Separate Files — Lesson #9
SpriteComponent Position and Anchor — Lesson #10
Platform Placement — Lesson #11
Additional Flutter Flame Tutorials
Playlist of Flutter Flame tutorials
