HTML5 Game Development - 2D Platform Game Fundamentals

Learn Phaser and modern web development by building a 2D platform game for your web browser

Created by : Rated :4.1 58396 views

Last Updated: 2022-04-25 07:04:10 English Course Type: Self Learning

HTML5 Game development using Phaser
2D platform game fundamentals
Webpack and Phaser: Utilising up a robust base project
How to work with sprites and spritesheets
Loading game assets
Character animations
Capturing user input
Platform game physics
Character movement
Finite state machine pattern
Handling collisions
Level building with the Tiled level editor
Cameras
Parallax scrolling

In this course, you'll learn the basics of 2D game development using HTML5/Javascript and the excellent Phaser game engine. The course will focus on character movement for a platform game and introduce level creation using the Tiled level editor.

We'll cover how to build a character with various moves and animations. We'll use a physics engine to get the jump and horizontal movement feeling just right similar to classic games like Mario Bros. We’ll then create a simple platform game level and setup the collision logic for our character to interact with it.

Along the way to building a super fun 2D platform game, we’ll be looking at some best practices on structuring and architecting a game project by starting with a robust boilerplate that you can use for any game, as well as exploring the finite state machine pattern as a means of controlling our character’s movements and animations. This will give you a solid foundation for continuing your journey into game development and give you a kick start in creating a full blown game!

If any of the above sounds a bit daunting, don’t worry, the course videos will explain everything in a way that’s suitable even for a complete beginner. While a little familiarity with Javascript would be beneficial, we’ll be doing everything step-by-step in enough detail that you can follow along. Basically, if you have an interest in how 2D platform games work and would like to have a go at creating your own, this course is for you.

A computer (Mac or PC)

Anyone with an interest in learning how they can build their own 2D platform game
Beginner Javascript developers curious about building games for the web
Basic experience with programming in Javascript or another programming language recommended

Section 1 : Getting Started 5 Lectures 00:11:36
Lecture 1 :
Tools of the Trade Preview
Lecture 2 :
Project Starter Code
Lecture 3 :
Intro to Phaser
Lecture 4 :
Code Completion for Phaser in VS Code
Lecture 5 :
Base Project Code Review
Section 2 : Building a Character 24 Lectures 02:11:04
Lecture 1 :
Finding Royalty Free Game Assets
Lecture 2 :
Spritesheets and Texture Atlases
Lecture 3 :
Loading Spritesheets
Lecture 4 :
Playing Animations
Lecture 5 :
Enabling the Arcade Physics Engine
Lecture 6 :
Collision Rectangles for Physics Bodies
Lecture 7 :
Creating a Hero Class
Lecture 8 :
Capturing Keyboard Input
Lecture 9 :
Horizontal Movement
Lecture 10 :
Using Acceleration
Lecture 11 :
Jumping
Lecture 12 :
Double Jumping
Lecture 13 :
Fixing Jump Bugs
Lecture 14 :
Intro to Finite State Machines
Lecture 15 :
Installing the javascript-state-machine Library
Lecture 16 :
Movement State Machine
Lecture 17 :
Triggering State Transitions
Lecture 18 :
Logic for State Transitions
Lecture 19 :
Loading Spritesheets and Creating Animations
Lecture 20 :
Fixing the Fall Spritesheet
Lecture 21 :
Flowchart For Animation States
Lecture 22 :
Creating the Animation State Machine
Lecture 23 :
Adding Logic for Animation State Transitions
Lecture 24 :
Completing the Animation State Machine
Section 3 : Building a Level 15 Lectures 01:41:03
Lecture 1 :
Intro to Tiled
Lecture 2 :
Creating a Tileset
Lecture 3 :
Building a Level in Tiled
Lecture 4 :
Loading the Level
Lecture 5 :
Adding a Camera
Lecture 6 :
Colliding with the Levelâ€™s Tiles
Lecture 7 :
Fixing Pixel Bleeding with Extrusion
Lecture 8 :
Adding a Foreground Layer
Lecture 9 :
Adding a Background Layer with Parallax Scrolling
Lecture 10 :
Setting the Heroâ€™s Start Location via the Level
Lecture 11 :
Adding Spike Objects
Lecture 12 :
Finish Adding Spikes Objects
Lecture 13 :
Killing the Hero
Lecture 14 :
Completing the Death Sequence
Lecture 15 :
Resetting the Game

How do i access the course after purchase?
It's simple. When you sign up, you'll immediately have unlimited viewing of thousands of expert courses, paths to guide your learning, tools to measure your skills and hands-on resources like exercise files. There’s no limit on what you can learn and you can cancel at any time.
Are these video based online self-learning courses?
Yes. All of the courses comes with online video based lectures created by certified instructors. Instructors have crafted these courses with a blend of high quality interactive videos, lectures, quizzes & real world projects to give you an indepth knowledge about the topic.
Can i play & pause the course as per my convenience?
Yes absolutely & thats one of the advantage of self-paced courses. You can anytime pause or resume the course & come back & forth from one lecture to another lecture, play the videos mulitple times & so on.
How do i contact the instructor for any doubts or questions?
Most of these courses have general questions & answers already covered within the course lectures. However, if you need any further help from the instructor, you can use the inbuilt Chat with Instructor option to send a message to an instructor & they will reply you within 24 hours. You can ask as many questions as you want.
Do i need a pc to access the course or can i do it on mobile & tablet as well?
Brilliant question? Isn't it? You can access the courses on any device like PC, Mobile, Tablet & even on a smart tv. For mobile & a tablet you can download the Learnfly android or an iOS app. If mobile app is not available in your country, you can access the course directly by visting our website, its fully mobile friendly.
Do i get any certificate for the courses?
Yes. Once you complete any course on our platform along with provided assessments by the instructor, you will be eligble to get certificate of course completion.
For how long can i access my course on the platform?
You require an active subscription to access courses on our platform. If your subscription is active, you can access any course on our platform with no restrictions.
Is there any free trial?
Currently, we do not offer any free trial.
Can i cancel anytime?
Yes, you can cancel your subscription at any time. Your subscription will auto-renew until you cancel, but why would you want to?

Jed Hastwell,

58396 Course Views

1 Courses

Hi, Iâ€™m Jed. Iâ€™ve helped thousands of people learn how to develop their own games and Iâ€™m excited to teach you what I know. Iâ€™ve been a professional web and game developer for over 10 years. In that time Iâ€™ve produced many mini-games in the form of playable ads for products like Candy Crush, Idle Minder Tycoon, Hearthstone and Final Fantasy XV to name a few. I also co-founded a small indie games development studio with releases on the iOS App Store. I have a bachelorâ€™s degree in computer science but my skills in game development are mostly self taught and I believe anyone is capable of learning how to build games. My step-by-step, project-based approach to teaching is easy to follow and will have you building games that you can be proud of in no time. I canâ€™t wait to see what you can come up with! Jed.