CodeCakes
Published in

CodeCakes

Flutter Flame Lessons

Introduction to Flame, a 2D game engine for Flutter.

Build mobile app games with 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?

answers

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

  1. 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.
  2. Get your own sprite. For example, you can use a free sprite from gameart2d.com
  3. Create your own Flame Game by starting with a new Flutter project. For example flutter create girl_adventure
  4. Display a non-moving sprite on the screen
  5. Move the sprite on the screen
  6. 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

Free Sprite Resources

--

--

--

Teach your kid programming with Flutter, Dart, and JavaScript.

Recommended from Medium

A Night at The Museum

Game Design Week 3 Journal: Pixels and Levels

A Guide to Aping into Colony Online — A Play to Earn NFT Gaming MMO

What is the best video game morality system? | Rad or Shite

Team Update 12: Stable Coins, Updated Leaderboard and World War Endless

my thoughts on the RC’s 2022 agenda

Reflection 3

The Best Video Games for Quarantine, Even if You’re Not a Gamer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Craig Oda

Craig Oda

open source advocate, writer, Flutter developer, father, husband, fly fisherman, surfer

More from Medium

Flutter Shared Preferences

Flutter Shared Preferences

Add Firebase to a flutter app with firebase CLI

Velocity and Gravity in Flutter Games with Flame

Flutter Widgets Explain :