Welcome to the Mobile Game Development Course in which we will Reverse Engineer, Architect, and Develop a mobile version of the famous Chrome Dinosaur Game uing the Flame Game Engine with Flutter and Dart.Why Develop Mobile Games?Mobile Games are by far the largest share of Game Application revenue in the world. More than 50% of all game application development comes from Mobile games.
Being able to code Mobile Games offers great potential in such a large market.
Why Flame Engine
Welcome to the Mobile Game Development Course in which we will Reverse Engineer, Architect, and Develop a mobile version of the famous Chrome Dinosaur Game uing the Flame Game Engine with Flutter and Dart.Why Develop Mobile Games?Mobile Games are by far the largest share of Game Application revenue in the world. More than 50% of all game application development comes from Mobile games.
Being able to code Mobile Games offers great potential in such a large market.
Why Flame Engine
The Flame Engine is a minimalist 2D game engine that runs on top of the Flutter framework. So it is light-weight with a small footprint.
This is perfect for mobile games.
Advantages of The Flutter Framework
You work with one code base but get multiple platform deployment. Basically write once, and deploy to both iOS and Android. This is a huge advantage as it saves you time and effort.
And this is great for mobile games since we do not rely on the specific OS GUI as we basically take over the screen and create our own GUI from scratch.
Why Take this course?
In this course we will teach you how to go through the full game development cycle and you will learn how to develop a mobile game from scratch.
We will start with the game idea
We will then reverse engineer this idea into game requirements
they will include the game elements
and the game mechanics
We will then consider the game aesthetics
We will create a game architecture
And then we will fully develop the game.
Assumptions
We assume that you know Flutter/Dart and have worked with it.We also assume that you have some knowledge of the Flame Engine. This could be either through an introductory course such as "Flame & Flutter with Dart : Build your First 2D Mobile Game" which is offered on Udemy or through some online tutorials.
Everything in this course will be explained in detail including the code so you do not have to be an expert.
What will you learn?
This course will teach you not just to code the game but it will teach you the full scope of the game development cycle.
The Chrome Dinosaur game is an example of a very popular game genre which is the Endless Runner Game and also known as Infinite Runner Game.
Developing any game from scratch is a great exercise that will not only make you a better game developer but it will also help you master the Flame Game Engine API so that you will be able to create your own games.
Reverse Engineering a Game is a very important skill for a game developer and we will look carefully at every detail of the game mechanics and the game elements for the Chrome Dino game, and we will map the mechanics and the elements into an architecture which we will then develop.
We will use efficient sprite animation as well as simple sound design. We will map out all the individual game elements and their mechanics and then we will combine them into more complex behavior. For example we will combine the mechanics of our Dino and the obstacles to include Collision Detection in the most efficient and architecturally sound manner.
Milestone approach
Part of how we teach you in this course revolves around practical case studies. Each case study shows you a full solution to a given element of 2D game coding such as for example Animation or Collision Detection.
Each milestone will build on the previous one which is one of the most important skills in software development. We will build for ease of modification and ease of enhancement.
You will learn about what we will develop and why we will be developing it.
This course is all about becoming very proficient in game development and we introduce you here to what we will be developing.
Here we will go over some assumptions that we make about the knowledge expected from the student. This is an intermediate course so some knowledge of Flutter and Dart and the Flame Engine is expected.
We will also cover the approach to how we will break down the development process.
Being able to Reverse-Engineer game concepts into actual architecture and then code is crucial to being a great game developer.
This lecture explains why that is the case and why this is an important skill.
In this lecture we will discuss the game development cycle and how to approach game development in the most efficient manner.
A simple exercise for the student to get into the thick of things. Here we begin to document the game mechanics of the game we will be developing.
Solution to our first exercise.
We will discuss mapping out the game elements and their mechanics in this intro into a number of steps before we architect our solution.
Delving deeper into the Dino Jumping and Ducking details
Delving deeper into the game obstacle generation.
Delving deeper into the game parallax generation. We will especially see the synergy between clouds, stars, and moon phases for the background parallax.
Delving deeper into the speed logic of the game
Delving deeper into the logic behind the collision detection.
Delving deeper into the game scoring mechanism and how it ties into the speed of the game as well as time elapsed.
Delving a bit deeper into sound FXs in the game. The sound logic for the game is rather trivial in the dino game with only three sounds to be used.
Delving deeper into how the horizon is generated in the game and how it affects other elements in the game.
We will discuss the development strategy and how to prioritize our approach to design and development of the game.
Exercise for the student which will focus on documenting game elements.
NOTE: The template document has been attached with this lecture.
Solution to Exercise #2 with a sample document.
NOTE: The solution document has been attached with this lecture.
We will establish in the lecture what the most important code elements of the game are as a priority for development.
In this lecture we will abstract a high-level Modular Architecture of the full solution.
The student will be shown what to review and research in the Flame Engine for the game development
In this lecture we will break down what we will accomplish in Milestone #1
Basically we will cover the following:
Creating the Shell of the Game so we can run it in the Flutter/Flame Environment
Creation of the Game Manager class which will coordinate all other components in the game
Creation of the initial TRex/Dino player with the ability to Jump
In this lecture we code all the elements shown below for Milestone #1
Basically we will cover the following:
Creating the Shell of the Game so we can run it in the Flutter/Flame Environment
Creation of the Game Manager class which will coordinate all other components in the game
Creation of the initial TRex/Dino player with the ability to Jump
NOTE: The source code for Milestone #1 is attached with this lecture as a zipped file of .dart files as well as assets and pubspec.yaml file.
In this lecture we will look at some more detail of the Player class, especially concentrating on how Sprite Animation and State Switching is achieved.
In this exercise the student will take the shell code that we developed in our coding section for Milestone #1 and will add some new functionality for the Dino:
The ability to duck with all the animation
The zoned-distinction for the tapping in the left half of the screen for ducking and the right half of screen for jumping.
This is a solution to Exercise #3
NOTE: The Source Code for the solution has been attached to thsi lecture so you can just look at that.
If you need an explanation then this video lecture explain a bit more about the approach and how it was developed.
In this lecture we will break down what we will accomplish in Milestone #2
Basically we will cover the following:
The Horizon Manager which will add smooth infinite horizon-line animation with images from the Asset PNG
We will also add the speed generation functionality to the Game Manager.
We will look at the code that we will use in the Horizon Animation as a strategy.
We will abstract out an algoirithm for cycling through horizon snippets to create our own revolving parallax effect.
In this lecture we code all the elements shown below for Milestone #2
Basically we will cover the following:
The Horizon Manager with proper animation that speeds up with passage of time
Speed generation in Game Manager
NOTE: The source code for Milestone #2 is attached with this lecture as a zipped file of .dart files as well as assets and pubspec.yaml file.
This code builds upon Milestone #1 but does not include any of the exercise changes.
In this exercise the student will take the HorizonManager code that we developed in Milestone #2 and we will modify/add some new functionality:
Explore the horizion generation algorithm to create a more randomized horizon generation
Add a debug text om the screen to show how the speed is changing.
In this lecture we will break down what we will accomplish in Milestone #3
Basically we will cover the following:
The Cloud Manager which will add variable (i.e. randomly generated) cloud Parallax Generation with images from the Asset PNG
We will also create our own randomizer.
We will look at the main code elements that we will use in the Cloud Animation as a strategy.
We will abstract out an algorithm for randomizing and animating cloud images to create our own revolving parallax effect.
In this lecture we code all the elements shown below for Milestone #3
Basically we will cover the following:
The Cloud Manager with proper randomization of the elements
Ensuring that clouds do not overwhelm the animation
NOTE: The source code for Milestone #3 is attached with this lecture as a zipped file of .dart files as well as assets and pubspec.yaml file.
This code builds upon Milestone #2 but does not include any of the exercise changes.
NOTE#2: I have also attached (separately) the longer version of the PNG asset file which contains the moon and the stars which the original PNG in the source code does not have. You will need to remap the location of some of the images to make the original code work.
In this exercise the student will take the CloudManager and Cloud code that we developed in our coding section for Milestone #3 and will modify/add/fix some new functionality:
You will investigate what the absolutePosition variable is doing when computing the cloud location.
You will also look at an issue with z-order for the clouds and other elements in the code.
You will add a whole new StarManager and Star classes to add stars to the parallax of the game
In this lecture the student will see how we will keep track of the game score and how we will display it on the screen. We will also get some hints about the high score for the user which will be part of the section exercise.
In this code session we will add the score management (tracking and displaying) code to our game
NOTE: The source code for Milestone #4 is attached with this lecture as a zipped file of .dart files as well as assets and pubspec.yaml file.
This code builds upon Milestone #3 but does not include any of the exercise changes.
in this exercise you will add permament High score to the game
In this lecture we will introduce the concepts necessary for obstacle generation such as:
Randomization of obstacle generation
Grouping of obstacles to create more complex obstacles
Calculating the gap between obstacles so that the game does not become impossible to play
Controlling the timing of obstacle generation.
NOTE: we are not going to manage collision detection yet as this is an independent action that is not reliant on obstacle generation algorithm.
In this lecture we will look at the main points of the algorithm for Obstacle Generation.
We will create first a pseudocode version of the code
We will also abstract the main variables that will drive our algorithm.
In this code session we will add the obstacle generation to our code. This is an initial simplified version that we can later enhance.
NOTE: The source code for Milestone #5 is attached with this lecture as a zipped file of .dart files as well as assets and pubspec.yaml file.
This code builds upon Milestone #4 but does not include any of the exercise changes.
In preparation for collision detection we want to student to try adding collision detection themselves as well as thinking about how to end the game and allow the user to restart it.
In this lecture we will introduce the concepts needed to provide collision detection in our game:
How do we add HitBoxes to the Player and Obstacle classes
What needs to be done to wire the collision in the Flame Engine
We will discuss what needs to be done to detect and process the collision.
NOTE: we are not going to yet manage the proper game termination. We will add this towards the end of this section.
In this code session we will add the collision detection to our code. This is an initial simplified version that we can later enhance with proper game over/restart logic
NOTE: The source code for Milestone #6 is attached with this lecture as a zipped file of .dart files as well as assets and pubspec.yaml file.
This code builds upon Milestone #5 but does not include any of the exercise changes.
In this exercise the student will make the hit-boxes (and thus the collision areas) more accurate by combining smaller hit-box areas. Additionally the student will document the architecture of the game so far with a high level UML diagram
In this section we will tie all the loose ends together:
In this video we will primarily look at how to properly adding a Game Over Component as an overlay to our already existing game.
We will look at the High Score solution directly in code (in the next lecture)
In this lecture we will code all the outstanding elements for the game:
Game Over Management
HIGH score display and persistence
NOTE: The source code for Milestone #7 is attached with this lecture as a zipped file of .dart files as well as assets and pubspec.yaml file.
This code builds upon Milestone #6 but does not include any of the exercise changes.
In this end-of-source project the student will accomplish the following:
Add zone-tapping to allow the player to both jump and duck in the mobile version of the game
Lower the horizon so that there is more real-estate to allow Dino to Jump higher.
Improve Collision Detection with better hit-box definition.
Add the animated pterodactyl sprite as a new obstacle
Add two different heights to the Dino jumping based on the time-length of the tap
Add more complexity to the cactus-generated obstacles.
Add other background parallax elements such as
Stars
Moon phases
EXTRA: Explore Adding sound to the game
Thank you for taking the course. Here are some final thoughts about what to do next in your journey to become a better game developer.
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.