HTML5 Mobile Game Development with Phaser

What if you could make games for iOS, Android and the web using the technologies you already know and love?
4.3 (26 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
369 students enrolled
$19
$200
90% off
Take This Course
  • Lectures 29
  • Length 2.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2014 English

Course Description

What if you could make games for iOS, Android and the web using the technologies you already know and love: HTML, CSS and JavaScript?

Learn game development by creating an infinite runner similar to Jetpack Joyride!

In this course you will learn how to create mobile games using Phaser, an awesome JavaScript library that allows you to create professional games for both mobile and desktop using HTML5.

By following the Learn by Doing approach that you find in all ZENVA courses, we’ll put together an infinite runner game, similar to the iOS best-seller Jetpack Joyride.

This course was created by Jeremy Dowell (a.k.a. Codevinsky) in collaboration with Pablo Farias Navarro, founder of ZENVA. Jeremy is a core member at the HTML5GameDevs forum and contributor to the Phaser engine. After coding in JavaScript for the best part of the last decades, Jeremy has authored web and mobile games in HTML5 and iOS, applications using Node.js and Angular, and technical tutorials for various platforms and technologies

What you will learn in this course:

  • Preloading your game assets such as images, sound and JSON files.
  • Creating an infinite runner with parallax effect.
  • Adding text and working with user input (touchscreen and mouse).
  • Animating characters and enemies.
  • Working with 2D physics.
  • Showing the high scores in a scoreboard.
  • Adding sound effects and music to your game.
  • How to make your game juicy, going belong a simple playable demo.

What are the requirements?

  • Knowledge of HTML, CSS, JavaScript and object-oriented programming
  • You need a web server (like Apache) to run the course examples
  • You'll need a code editor. We'll be using Sublime Text, but you can use any existing code editor.

What am I going to get from this course?

  • Learn HTML5 mobile game development with Phaser

What is the target audience?

  • Game development enthusiasts with basic knowledge of HTML, CSS, JavaScript and object-oriented programming

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Intro
01:39

Welcome to the course!

Let's start by taking a look at the final product you'll be building through out this course.

---

Connect with ZENVA

What would you like to learn next?

Article

Download the source code of the course.

Other Game Development Courses by Zenva
Preview
05:13
Section 2: Game Project
05:09

In this lesson we are gonna download the Phaser framework from http://phaser.io, we are gonna create a new project and explain how to initialize a new game with the Phaser.Game object.

---

Connect with ZENVA

What would you like to learn next?

05:30

In this lesson we talk about states, which are separate pieces of the game: boot state, preload state, menu state and game state. The boot state sets up global configuration for the game and loads image assets to be displayed while the pre-loader is on. The preload state loads all the game assets.

---

Connect with ZENVA

What would you like to learn next?

04:24

In this lesson we will continue setting up the Boot state.

---

Connect with ZENVA

What would you like to learn next?

05:13

In this lesson we will create the Preload state, which is the last step before building the game itself. In the Preload state all the game assets such as image and audio files will be loaded.

---

Connect with ZENVA

What would you like to learn next?

06:24

In this lesson we'll carry out the loading of the game's image, spritesheet and audio assets of our game.

---

Connect with ZENVA

What would you like to learn next?

04:16

In this lesson we'll complete the loading process.

---

Connect with ZENVA

What would you like to learn next?

06:50

In this lesson we create the Menu state and show the background and foreground of the level. We'll use the parallax effect to have the foreground moving faster than the background, giving a sense of speed.

---

Connect with ZENVA

What would you like to learn next?

06:03

In this lesson we'll add our player as a normal sprite. We'll animate our player and make him move up and down with a tween effect.

---

Connect with ZENVA

What would you like to learn next?

05:48

In this lesson we'll add our title and cover adding a bitmap font to add text. We'll also listen for user input to have the game started (mouse or touch).

---

Connect with ZENVA

What would you like to learn next?

07:06

Now that the Menu state is ready we can create our Game state. We'll add a physics system to have basic 2D physics support.

---

Connect with ZENVA

What would you like to learn next?

05:47

In this lesson we'll make our player fly! we'll cover a lot of concepts related to 2D physics such as collision detection.

---

Connect with ZENVA

What would you like to learn next?

07:06

In this lesson we'll talk about "prefabs", a game industry term referred to prefabrications. In Phaser, this refers to classes that we can use to create multiple instances of a game element.

---

Connect with ZENVA

What would you like to learn next?

05:58

In this lesson we'll add groups to hold the coins in our game. Groups allow us to hold multiple elements in Phaser.

---

Connect with ZENVA

What would you like to learn next?

03:52

In this lesson we'll create Enemy prefabs. We'll reuse some code from our Coin prefab.

---

Connect with ZENVA

What would you like to learn next?

03:31

Now that we have enemies and coins it's time to add score to the game.

---

Connect with ZENVA

What would you like to learn next?

10:13

In this lesson we'll get started with setting up a scoreboard.

---

Connect with ZENVA

What would you like to learn next?

02:18

In this lesson we'll complete our scoreboard.

---

Connect with ZENVA

What would you like to learn next?

02:25

In this lesson we'll implement the game shutdown to be able to restart the game.

---

Connect with ZENVA

What would you like to learn next?

04:26

Time to add some sound effects to our game!

---

Connect with ZENVA

What would you like to learn next?

04:13

We have a game that runs from start to finish, including animation, audio and controllers. So what's left? Well.. good games can have many details that give it a special feel. In this lesson we'll add some juiciness to our game.

---

Connect with ZENVA

What would you like to learn next?

07:03

In this lesson we'll implement the groups of coins.

---

Connect with ZENVA

What would you like to learn next?

Section 3: Summary
00:59

Congratulations! you've reached the end of the course.

Don't forget to leave a review :)

---

Connect with ZENVA

What would you like to learn next?

04:46

Free preview of our course HTML5 Game Development by Example - Veggies vs Zombies

---

Connect with ZENVA

What would you like to learn next?

07:37

Free preview of our course HTML5 Game Development by Example - Educational Game

---

Connect with ZENVA

What would you like to learn next?

04:19

Free preview of our course HTML5 Mobile Game Development for Beginners

---

Connect with ZENVA

What would you like to learn next?

05:13

Free preview of our course Create a HTML5 Game from Scratch

---

Connect with ZENVA

What would you like to learn next?

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Pablo Farias Navarro, Software Developer and Founder of ZENVA

Software developer and founder of ZENVA. Since 2012, Pablo has been teaching online how to create games, apps and websites to over 150,000 students through the Udemy and Zenva Academy platforms, and created content for companies such as Amazon and Intel.

Pablo is a member of the Intel Innovator Program in the Asia Pacific, and has run live programming workshops in San Francisco, Brisbane and Bangalore.

Pablo holds a Master in Information Technology (Management) degree from the University of Queensland (Australia) and a Master of Science in Engineering degree from the Catholic University of Chile.

Instructor Biography

Jeremy Dowell, Javascript Engineer

Jeremy Dowell has been writing JavaScript for the better part of two decades (since before Internet Explorer caused as many headaches as it does today). He's a core member of the HTML5GameDevs forum and works on the Phaser HTML5 Framework when he's got the time. He's written games for web and mobile using HTML5 and iOS, as well as applications written with Angular and Node. And most of all, he's always available to answer any questions you might have about the technologies he teaches.

Ready to start learning?
Take This Course