All in One Offer! | Access Unlimited Courses in any category starting at just $29. Signup today. Offer Ends in: 8 Days!

Browse Library

HTML5 Game Development - 2D Platform Game Fundamentals

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

Instructed by Jed Hastwell

2 days left at this price!
Get Unlimited Courses Access $29
$29
It Includes
  • Get Full Access to the platform
  • Access to 16000+ online courses
  • High Quality Recorded Lectures
  • Learn Online from Mobile/PC/Tablet
  • Assignments & Projects
  • Online iLab Access
  • Certificate of Completion
  • Download for offline viewing
  • Free Instructor Support
  • Access valid for 1 user only
  • Cancel Anytime
  • 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
View More...

Section 1 : Getting Started

  • Lecture 1 :
  • 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

  • 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

  • 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?

    Once you purchase a course (Single course or Subscription), you will be able to access the courses instantly online by logging into your account. Use the user name & password that you created while signing up. Once logged in, you can go to the "My Courses" section to access your course.
  • 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 certification after completing the course?

    Yes. Once you succesfully complete any course on Learnfly marketplace, you get a certiifcate of course completion emailed to you within 24 hours with your name & the Learnfly badge. You can definately brag about it & share it on your social media or with friends as one of your achievement. Click here to view the sample certificate Click Here
  • For how long can i access my course after the purchase?

    If you buy a single course, that course is accessible to you for a lifetime. If you go for a premium subcription, you can access all the courses on Learnfly marketplace till your subscription is Active.
  • Whats the difference between Single Course Purchase & Go Premium option?

    With Single Course Purchase, you only get an access of one single course. Whereas, with premium monhtly or annual subscription, you can access all the existing or new courses on learnfly marketplace. You can decide what option suits you the best and accordingly you can make your purchase.
  • Is there any free trial?

    Currently, we don't have any free trial but it may be available in near future.
  • What is the refund policy?

    We would hate you to leave us. However, if you are not satisfied, you can ask for a full refund within 30 days & we will be happy to assist you further.

Jed Hastwell,

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.
View More...
android-game-development-for-beginners

Android Game Development for Beginn...

By : Sandip Bhattacharya

Lecture 19

android-game-development-create-your-first-mobile-game

Android Game Development - Create Y...

By : Sandip Bhattacharya

Lecture 19

javascript-breakout-game-exercise

JavaScript - Breakout Game Exercise

By : Laurence Svekis

Lecture 17

make-video-game-in-unity3d

Make video game in unity3D

By : THE MMZ

Lecture 6

Free

unity-2d-game-development-with-c-for-beginners-android-ios

Unity 2D game development with C# f...

By : Hamza Brinis

Lecture 11

design-your-video-game-with-make-block-free-web-developing-system

Design your video game with Make Bl...

By : WebCast Channel

Lecture 6

Free

Sign up and start learning
By signing up, you agree to our Terms of Use and Privacy Policy
Reset Password Request
Enter your email address and we'll send you a link to reset your password.