Flame & Flutter with Dart : Build your First 2D Mobile Game from Udemy

What's inside

Learning objectives

Use flutter and dart to write a complete 2d game on top of the flame engine. no prior experience necessary.
Create from scratch, a game based on the famous retro-game from atari: asteroids.
Learn collision detection, particle physics, frame independent motion, parallax, sound design, and other advanced topics in game development.
Master design and coding fundamentals that apply to all 2d game engines.

Think like a software architect. go through the complete process of designing, architecting, and coding the game.
Learn how to write once and deploy to ios, android, and the web from a single codebase.
Develop a solid foundation for game design and game creation that will empower you to build your own games.
Learn how to use object oriented programming practically and effectively using design patterns

Use flutter and dart to write a complete 2d game on top of the flame engine. no prior experience necessary.
Create from scratch, a game based on the famous retro-game from atari: asteroids.
Learn collision detection, particle physics, frame independent motion, parallax, sound design, and other advanced topics in game development.
Master design and coding fundamentals that apply to all 2d game engines.
Think like a software architect. go through the complete process of designing, architecting, and coding the game.
Learn how to write once and deploy to ios, android, and the web from a single codebase.
Develop a solid foundation for game design and game creation that will empower you to build your own games.
Learn how to use object oriented programming practically and effectively using design patterns

Syllabus

Introduction

You will learn about what the Flame Engine is and how it fits in with Flutter and Dart.

This is a quick overview of what you will learn in this course.

This course will be taught with an emphasis on understanding the underlying mechanisms of the Flame Engine. We will learn conceptually and use code as a means-to-an-end of learning. We will learn the Architecture of the engine to have a better understanding of its capabilities.

You will learn here which IDE we will be using for this course (Visual Studio in case you are wondering!)

We will test a few concept here from this section.

Setup

You will learn about how to set up your coding environment so you can run the code in this course.

This will cover setting up the environment on a Windows machine.

This will cover setting up the environment on a Mac machine.

This will cover setting up the environment on a Linux machine.

In this lecture we learn how to test our Flutter environment to ensure that we can run all the code in the course's examples.

We have attached the test source code that you can use to test your environment as shown in this lecture.

Understand The Flame Engine Architecture. How does the Game Loop work? Write and run your first code in Flame Engine.

You will learn about the Game Loop concept in Game Engines.

You will learn about the game instantation hierarchy.

You will learn about how your game code is executed in the Flame Engine.

You will learn how to generate a Flutter Project via the command-line which we will use as our shell for the Flame Project in the next lecture.

You will learn how to create your first Flame application. We will add the Flame Engine dependecies to the pubspec.yaml, so that Flame libraries are added to our project, and we will run our first Flame Application!

You will learn how to override the main Game Loop functions, onLoad(), update() and render()

We have also attached the source code that goes with this lecture.

You will learn about the significance of Game Components in Flame, and how they fit into a component tree which is then operated upon by the Game Loop.

We will solidify your understanding of the concepts of Game Engines in this quiz

The Student will understand how we will structure the course learning material for the best benefit of the student’s learning.

Case-Studies: Introduction

You will learn how to run the source code that accompanies this course with Visual Studio by importing the sources into a standard Flutter project (which we convert into a Flame project.)

NOTE: The source code used in this lecture is provided here as an attachment for your convenience.

Students will learn and master the basic elements of Flame Engine Component Structure. Vectors, Flame Component Architecture , and Component Composability will be explored.

You will learn about what we will cover in this section.

You will learn about the PositionComponent class in Flame Engine which is the parent class for all screen-based objects in Flame games. In other words, if you want to render something on the screen you will need to know about this component.

We will look at a simple demo of the code that we will be writing in the next few lectures.

You will get a quick look at the architecture diagram of a simple code (that we will be writing in this section) which should give you a more of a bird's-eye-view level of the code and its structure within the context of the Flame Engine.

NOTE: The UML Diagram has been provided as a downloadable resource (as an image) for your connvenience.

In this lecture we will start coding the simple 'squares' game that we saw the demo of a few lectures ago.

We also have attached the source code for the full lecture.

You will learn about how Vectors are important to the game math and how different APIs can be used to get useful information such as magnitude, direction, or angle.

We will test some of the key concepts here about components and vectors in Flame Engine.

You will see vectors (i.e. the Vector2 class) in action as we modify our 'squares' code. You will also learn how to remove objects from the component tree.

We also have attached the source code for the full lecture.

You will learn about the very powerful concept of component composability which is the ability to group components together so they can be manipulated as a single object.

We will also look at the design of a health-bar component as an example of compositing multiple objects.

In this lecture we will look at a UML diagram for how to add a life-bar component as a composited component.

NOTE: The UML Diagram has been provided as a downloadable resource (as an image) for your connvenience.

You will look at draft idea code for a life-bar component which showcases component composability by grouping a few rectangular components with the main parent object.

We also have attached the source code for the full lecture.

We will test some of the key concepts here about composability in Flame Engine.

Case Study #1 Exercises

These are coding exercises that you should attempt to do. They will allow you to review the concepts of this case study and learn to use the Flame Engine's APIs.

You will find two resources here as well:

A PDF file with solution discussion. You can view this before you look at the source code.
The source code for this exercise as a .ZIP file. Once you unzip the file you will find all the sources as discussed in Lecture #18. Please follow that lecture for HOW TO run this code.

Solutions

Actual code solutions are provided in the remaining lectures in this section.

Solution to the Case Study #1 Exercise #1

NOTE: attached you will find the source code for this solution.

Solution to the Case Study #1 Exercises #2 and #3

NOTE: attached you will find the source code for this solution.

Solution to the Case Study #1 Exercise #4

NOTE: Attached you will find the source code for this solution.
NOTE: The UML Diagram has been provided as a downloadable resource (as an image) for your connvenience.

The student will learn about how to create a Joystick for users to play the game with.

In this case study you will learn how to code a virtual joystick control that the user can utilize to control objects on the screen, which we will use to control a spaceship.

We will look at the UML diagram of how a joystick component and joystick player (i.e. the component that is controlled by the movements of the joystick) are related architecturally in the Flame Engine.

NOTE: The UML Diagram from the lecture has been provided as a downloadable resource (as an image) for your connvenience.

We will look at the joystick code that controls an image of a spaceship on the screen

Note: We have attached the source code for the full lecture.

We will look at how we can generate bullets (i.e. having the spaceship shoot) but with the caveat that we need to set the direction vector for the bullets to match where the spaceship is pointing.

So, if the spaceship is pointing up then the bullets need to shoot up, and if it is pointing at a diagonal then the bullet should shoot in that direction as well. We will need to understand the angle of a vector for that.

We will look at the UML diagram for adding the Bullet into the Joystick and Spaceship mix.

NOTE: The UML Diagram from the lecture has been provided as a downloadable resource (as an image) for your connvenience.

We will look at the addition of Bullets into our code and how we achieve the proper direction vector rotation so that the bullets travel in the right direction.

Note: We have attached the source code for the full lecture.

We will solidify some facts about the Joystick component.

Case Study #2 Exercises

These are coding exercises that you should attempt to do. They will allow you to review the concepts of this case study and learn to use the Flame Engine's APIs.

You will find two resources here as well:

A PDF file with solution discussion. You can view this before you look at the source code.
The source code for this exercise is a .ZIP file. Once you unzip the file you will find all the sources as discussed in Lecture #18. Please follow that lecture for HOW TO run this code.

Solutions

Actual code solutions are provided in the remaining lectures in this section.

Solution to the Case Study #2 Exercises #1 and #2

NOTE: attached you will find the source code for this solution.

The student will laearn how to add sound and music to their games.

This is an introduction to sound in games and in Flame Engine, Sound effects and music are covered.

We will look at how to add sound assets into our code and then how to play the sounds and music in our game.

Note: We have attached the source code for the full lecture.

We will review and test our knowledge about sounds in Flame Game Engine

Case Study #3 Exercises

These are coding exercises that you should attempt to do. They will allow you to review the concepts of this case study and learn to use the Flame Engine's APIs.

You will find two resources here as well:

A PDF file with solution discussion. You can view this before you look at the source code.
The source code for this exercise is a .ZIP file. Once you unzip the file you will find all the sources as discussed in Lecture #18. Please follow that lecture for HOW TO run this code.

Solutions

Actual code solutions are provided in the remaining lectures in this section.

Solution to the Case Study #3 Exercises #1 and #2

NOTE: attached you will find the source code for this solution.

The student will learn about what collision detection is and how to best write code for efficient collision detection.

We will learn here about collision detection. This is a very important topic for game coding since object interaction is at the heart of most games and especially such shooter game like 'Asteroids'

We will learn how to detect when objects come in contact.

Collision Detection Quiz #1

We will learn more about Collision Detection and how we can debug the HitBox shapes so that we can see what the actual collosion area is for a given Object.

We will look at the Architectural Diagram for our collision detection code sample. You will be able to see the different elements that are needed to make an application use Collision Detection.

We will look at Collision Detection in action by having a number of moving balls on the screen that change color when they collide with each other.

Note: We have attached the source code for the full lecture.

We will test a deeper understanding of the Collision Detection workflow in this quiz.

Case Study #4 Exercises

These are coding exercises that you should attempt to do. They will allow you to review the concepts of this case study and learn to use the Flame Engine's APIs.

You will find two resources here as well:

A PDF file with solution discussion. You can view this before you look at the source code.
The source code for this exercise is a .ZIP file. Once you unzip the file you will find all the sources as discussed in Lecture #18. Please follow that lecture for HOW TO run this code.

Solutions

Actual code solutions are provided in the remaining lectures in this section.

Solution to the Case Study #4 Exercise #1

NOTE: attached you will find the source code for this solution.

Solution to the Case Study #4 Exercise #2

NOTE: attached you will find the source code for this solution.

The Student will learn how to utilize Timers in Games.

You will learn how to use Timers to control repetitive tasks and interval-based notifications.

We will test you knowlegde of Timers in Flame

We will look at how to code an interval and countdown times. Here we will use Timer utility classes. In the next lecture we will look at Timer components.

Note: We have attached the source code for the full lecture.

In this lecture we will see how to do the same timer-based coding but with an Object Oriented TimerComponent class.

Note: We have attached the source code for the full lecture.

Some more questions for Timers

Case Study #5 Exercises

These are coding exercises that you should attempt to do. They will allow you to review the concepts of this case study and learn to use the Flame Engine's APIs.

You will find two resources here as well:

A PDF file with solution discussion. You can view this before you look at the source code.
The source code for this exercise is a .ZIP file. Once you unzip the file you will find all the sources as discussed in Lecture #18. Please follow that lecture for HOW TO run this code.

Solutions

Actual code solutions are provided in the remaining lectures in this section.

Solution to the Case Study #5 Exercise #1

NOTE: attached you will find the source code for this solution.

Solution to the Case Study #5 Exercise #2

NOTE: attached you will find the source code for this solution.

Students will learn about what Parallax is and how to implement it in Flame Engine

In this lecture we will study the Parallax Effect and how to create it in games.

In this lecture we will see how to code a horizontal parallax effect with 5 images. You will learn about the base multiplier to control the relative parallax speed as well as how to code for landscape device orientation.

Note: We have attached the source code for the full lecture.

We will code a slight parallax variation: a vertical 2-image parallax to simulate a starry sky.

Note: We have attached the source code for the full lecture.

Parral Quiz

Case Study #6 Exercises

These are coding exercises that you should attempt to do. They will allow you to review the concepts of this case study and learn to use the Flame Engine's APIs.

You will find two resources here as well:

A PDF file with solution discussion. You can view this before you look at the source code.
The source code for this exercise is a .ZIP file. Once you unzip the file you will find all the sources as discussed in Lecture #18. Please follow that lecture for HOW TO run this code.

Solutions

Actual code solutions are provided in the remaining lectures in this section.

Solution to the Case Study #6 Exercises #1 and #2

NOTE: attached you will find the source code for this solution.

Solution to the Case Study #6 Exercise #3

NOTE: attached you will find the source code for this solution.

In this section students will learn about particle physics and how we create particle simulations in flame Engine

Exciting times! We are going to learn about the particle system in the Flame Engine which will allow us to work with particle generators and some cool particle physics. In this lecture we introduce the whole Particle System in Flame.

We will test here the understanding of some basic particle concepts in the Flame Engine.

Creating Simple Particle Simulations

Another question to test your understanding.

We will look at the code for Particle Stream simulation and understand how the Particle Generator builds up a particle system.

Note: We have attached the source code for the full lecture.

We will look at the code for how to generate what looks like an explosion using the particle system.

Note: We have attached the source code for the full lecture.

We will look at the code for how to generate what looks like an explosion using the particle system, as we have learned in the previous lecture.

Note: We have attached the source code for the full lecture.

We are going to look at a more complex and ambitious particle simulation: that of fireworks. We will try to capture the fireworks mechanics.

We will look at the code for how to generate what looks like fireworks using the particle system, as we have learned in the previous lecture.

Note: We have attached the source code for the full lecture.

Even more Particle Systems related Questions

The last example of a particle simulation will be a photo-realistic (animation based) explosion using a SpriteSheet component.

Note: We have attached the source code for the full lecture.

Case Study #7 Exercises

These are coding exercises that you should attempt to do. They will allow you to review the concepts of this case study and learn to use the Flame Engine's APIs.

You will find two resources here as well:

A PDF file with solution discussion. You can view this before you look at the source code.
The source code for this exercise is a .ZIP file. Once you unzip the file you will find all the sources as discussed in Lecture #18. Please follow that lecture for HOW TO run this code.

Solutions

Actual code solutions are provided in the remaining lectures in this section.

Solution to the Case Study #7 Exercise #1

NOTE: attached you will find the source code for this solution.

Solution to the Case Study #7 Exercise #2 - Segment #1

NOTE: attached you will find the source code for this solution. Please also note that this source has all the segments from exercise#2. We have split the explanation into 8 segments (so 8 videos) but the source code is in one application, which is attached to this lecture.

Solution to the Case Study #7 Exercise #2 - Segment #2

NOTE: attached you will find the source code for this solution.

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Uses the Flame Engine, which is a lightweight 2D game engine built on Flutter, making it ideal for mobile game development due to its small footprint

Emphasizes an architectural approach to game development, teaching software engineering principles alongside Flame Engine concepts using UML diagrams

Covers core game development concepts like game loops, component rendering, collision detection, and particle physics, providing a solid foundation for 2D game creation

Leverages Flutter's cross-platform capabilities, allowing developers to write code once and deploy to both iOS and Android, saving time and effort

Assumes prior coding experience and familiarity with Flutter/Dart, which may require beginners to invest additional time in learning these prerequisites

Includes case studies with coding exercises and solution videos, providing hands-on practice and reinforcing learning of Flame Engine APIs

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Flame & Flutter with Dart : Build your First 2D Mobile Game with these activities:

Review Dart Fundamentals

Show steps

Solidify your understanding of Dart syntax and core concepts before diving into game development with Flame.

Show steps

Review Dart documentation and tutorials.
Practice writing basic Dart programs.
Focus on object-oriented programming concepts.

Review 'Flutter Apprentice'

Show steps

Gain a deeper understanding of Flutter, the framework upon which Flame is built, to enhance your game development skills.

View Flutter Apprentice (Second Edition): Learn to... on Amazon

Show steps

Read the chapters relevant to UI and layout.
Experiment with different Flutter widgets.
Try to replicate simple UI elements from existing games.

Simple Sprite Animation

Show steps

Practice implementing sprite animation using Flame to reinforce your understanding of component rendering and game loop concepts.

Show steps

Find a simple sprite sheet online.
Load the sprite sheet into your Flame project.
Create a component to animate the sprite.
Implement basic animation controls.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Collision Detection Exercises

Show steps

Sharpen your collision detection skills by working through a series of targeted exercises using Flame's collision detection system.

Show steps

Create two simple rectangular components.
Implement collision detection between them.
Modify their shapes and observe the changes.
Add more components and complex collision scenarios.

Document Your Asteroids Game Journey

Show steps

Reinforce your learning by documenting your experience building the Asteroids game, including challenges faced and solutions implemented.

Show steps

Create a blog or online journal.
Document your progress on each game feature.
Share code snippets and explanations.
Reflect on what you learned.

Contribute to Flame Engine

Show steps

Deepen your understanding of Flame by contributing to the open-source project, fixing bugs, or adding new features.

Show steps

Explore the Flame Engine GitHub repository.
Identify a bug or feature you want to work on.
Submit a pull request with your changes.
Participate in code reviews.

Extend the Asteroids Game

Show steps

Solidify your knowledge by extending the Asteroids game with new features, such as power-ups, new enemy types, or improved graphics.

Show steps

Brainstorm new features to add.
Design the implementation of each feature.
Implement the features using Flame Engine.
Test and refine your changes.

Career center

Learners who complete Flame & Flutter with Dart : Build your First 2D Mobile Game will develop knowledge and skills that may be useful to these careers:

Mobile Game Developer

A mobile game developer creates games for smartphones and tablets. This course is directly relevant to a mobile game developer because it teaches the fundamentals of 2D game development using the Flame Engine on the Flutter framework. The course's focus on architectural approaches, along with topics such as sprite animation, collision detection, and particle physics, directly translate to the skills needed to develop professional mobile games. Those who wish to enter the field of mobile game development should take this course, as it provides a practical, hands-on approach to learning game engine fundamentals.

See salaries and explore the career path for Mobile Game Developer

Independent Game Developer

An independent game developer creates games on their own or in small teams. This course is highly relevant to an independent game developer since it covers the complete process of designing, architecting, and coding a 2D mobile game. The course teaches how to use the Flame Engine, and key game development concepts like component rendering, collision detection, and sound design. An independent game developer should take this course as it provides the fundamentals needed to develop mobile games from scratch. The course's focus on a software architecture approach will allow independent game developers to create complex games.

See salaries and explore the career path for Independent Game Developer

Flutter Developer

A Flutter developer creates cross-platform applications using the Flutter framework. This course would be useful for a Flutter developer who wants a hands-on experience in game development and a deeper understanding of the framework. The course goes into details about using Flutter to build a 2D mobile game and also shows how to apply an architectural approach to software design. A Flutter developer may find the focus on game loops, component structure and how to deploy to both iOS and Android useful. A Flutter developer looking for hands-on experience should consider this course.

See salaries and explore the career path for Flutter Developer

Game Programmer

A game programmer writes the code that makes a game function. This course may be useful for a game programmer as it dives into fundamental game development concepts such as game loops, component rendering, and game mechanics, all within the context of the Flame Engine. The course not only teaches code but also a software architecture approach to game design, which is useful for programmers working on any sort of game. This course's focus on deploying to multiple platforms also makes it a good fit for developers interested in reaching a wide audience. Anyone wanting to become a game programmer may benefit from learning these fundamentals.

See salaries and explore the career path for Game Programmer

Mobile Application Developer

A mobile application developer creates applications for mobile devices. This course is helpful to a mobile application developer because it teaches how to develop and deploy mobile applications using Flutter and Dart, and using an architectural approach to application design. This approach of designing for multi-platform deployment is particularly relevant for mobile application developers. The course's focus on fundamentals and design patterns will help mobile application developers to build more robust and maintainable applications. Those who wish to learn mobile development should consider this course for an introduction to essential concepts.

See salaries and explore the career path for Mobile Application Developer

Software Engineer

A software engineer designs, develops, and maintains software systems. While this course focuses specifically on mobile game development, it uses a software architecture approach. This means that a software engineer may find this course useful. The course teaches about design patterns and creating modular, composable components, alongside an emphasis on architectural design using UML diagrams. These skills are highly transferable and applicable to broader software engineering roles. Software engineers interested in enhancing their design skills or those exploring game development should take this course.

See salaries and explore the career path for Software Engineer

Software Architect

A software architect is responsible for the high-level design of software systems, making decisions about the structure and technology used. Because the course emphasizes a software architecture approach in addition to coding, the course may be useful to a software architect. The course uses UML diagrams to show how code fits together as well as teaching about component composability, which are key concepts for a software architect. A software architect may use this course as a way to learn new approaches to software structure and design. Anyone in a software architecture role may benefit from taking this course.

See salaries and explore the career path for Software Architect

Application Developer

An application developer creates software for computers and mobile devices. This course may be useful to an application developer as it teaches how to develop and deploy a mobile application using Flutter and Dart, and how to approach complex application design using a software architecture approach. The course also goes into the details of software design, providing hands-on experience with concepts such as component structure, composability, and API usage. Anyone wanting to become an application developer may find this course a useful introduction to application architecture.

See salaries and explore the career path for Application Developer

Game Designer

A game designer is involved in planning the mechanics, rules, and overall experience of a game. While this course focuses on the technical aspects of game development, a game designer may be interested in this course because it provides a hands-on understanding of how game mechanics work, from the game loop to collision detection and sound design. The course also touches on aspects directly related to a game designer's work, like understanding vector math and how elements interact. A game designer may use this course to have a clearer vision of what is possible in the code, making their designs more practical. A game designer looking to understand the technical creation of games should take this course.

See salaries and explore the career path for Game Designer

Dart Developer

A Dart developer uses the Dart programming language to build applications. This course could be useful to a Dart developer, particularly if they are interested in game development or mobile application development. The course provides hands-on experience using Dart and Flutter for building a 2D mobile game, covering aspects such as UI development, game logic, and deployment to multiple platforms. A Dart developer who wants practical experience building applications with Dart and Flutter may find this course helpful.

See salaries and explore the career path for Dart Developer

Simulation Developer

A simulation developer creates models and environments that mimic real-world systems or scenarios. This course may be useful to a simulation developer who wants to learn about modeling different real-world phenomena in a 2D environment. The course demonstrates how to simulate complex mechanics, such as particle physics, collision detection, and object motion, all of which are used in simulation development. The course's emphasis on the architectural approach may also be useful when designing simulations. A simulation developer who is interested in understanding the technical aspects of building game-like simulations will learn these concepts from this course.

See salaries and explore the career path for Simulation Developer

User Interface Developer

A user interface developer focuses on building the interactive elements of software. While this course is primarily about game development with Flame Engine, it does cover topics like component rendering and creating UIs on the screen with examples such as a health bar or a joystick. This course may be useful to a user interface developer interested in learning about UI construction in a 2D game environment. This practical, hands-on experience of designing and creating UIs could be a valuable learning experience. A user interface developer wanting to understand how UI elements work within a game engine may benefit from this course.

See salaries and explore the career path for User Interface Developer

Technical Artist

A technical artist bridges the gap between art and programming in game development, ensuring that art assets work well in the game. This course may be useful to a technical artist because it covers key technical concepts related to game development, such as sprite sheet animation, particle effects, and sound design. This course helps teach the technical side of things, providing an understanding of game mechanics and how they can complement the art. A technical artist wanting to better understand the technical side of games and how art is implemented may benefit from this course.

See salaries and explore the career path for Technical Artist

Multimedia Programmer

A multimedia programmer develops interactive content that often uses audio, video, and animations. While this course focuses on gaming, the underlying principles of game development are relevant to multimedia. A multimedia programmer might find this course useful as it directly teaches topics such as sprite animation, sound integration, and using components to create interactive experiences. A multimedia programmer may also appreciate the software architecture approach in the course. This is useful for building their own interactive experiences.. A multimedia programmer looking for a practical understanding of how to implement interactive media components should take this course.

See salaries and explore the career path for Multimedia Programmer

Educational Content Developer

An educational content developer creates materials for learning, often including interactive elements. This course may be useful for an educational content developer looking to create interactive learning tools, particularly in the field of game design. Educational content developers may benefit from learning how to implement practical concepts from game development to make online educational environments more engaging and interactive. They can use techniques from the course to design engaging educational games. An educational content developer wishing to learn how to leverage game design to increase engagement may find this course helpful.

See salaries and explore the career path for Educational Content Developer

Reading list

We've selected one books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Flame & Flutter with Dart : Build your First 2D Mobile Game.

Flutter Apprentice (Second Edition)

Save

Provides a comprehensive introduction to Flutter, which is essential for using the Flame engine. It covers the basics of Flutter widgets, layouts, and state management. While not directly focused on game development, it builds a strong foundation for understanding the underlying framework. This book is particularly helpful for those new to Flutter or mobile app development.

Flutter Apprentice (Second Edition): Learn to Build...

Paperback

$$$

Flame & Flutter with Dart

Build your First 2D Mobile Game

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses