Mastering HTML5 Game Development
0.0 (0 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.
9 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Mastering HTML5 Game Development to your Wishlist.

Add to Wishlist

Mastering HTML5 Game Development

Unleash the power of HTML5 to build highly performing cross-platform games
0.0 (0 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.
9 students enrolled
Created by Packt Publishing
Last updated 8/2016
English
Current price: $12 Original price: $95 Discount: 87% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Create an interactive game using CreateJS and its various libraries
  • Add audio elements to game using SoundJS
  • With TweenJS, add a tweening effect to the game elements
  • Use PreloadJS to load the graphic assets of the game
  • Add graphical elements to the game with EaselJS
  • Use the local storage to add controls and support to the graphics
  • See how to debug the game on various platforms
  • Wade through common errors that occur and know how to avoid them
View Curriculum
Requirements
  • The course follows a pragmatic approach where you’ll find step-by-step instructions on the functions, tools, and concepts, and the reason you’re learning about them. We’ll get our hands dirty and build each aspect of the game from the ground up.
  • Basic understanding of HTML5, CSS, and JavaScript
Description

HTML5 is the fifth revision of the HTML standard, which is a core technology used for structuring and presenting content on Internet. Its innovative features such as Canvas, Audio, and Video elements make it a potential game building tool. While you can use Objective-C to build games just for iOS, HTML5 gives you the ability to build games for a multitude of platforms. This is the reason game developers and designers absolutely love HTML5—it simplifies the job of creating graphically-rich interactive games for the Internet and mobile devices. 

This video course will help you to create interactive, dynamic, and colorful games with HTML5. We’ll build a breakout game, using HTML5 Canvas to create the graphics and the main stage. We’ll use CreateJS and its modular libraries to build a visually-rich game. We’ll make it interactive by adding a keyboard, mouse, and touch support.

Then we’ll move on to set up the audio required for the game using WebAudio and HTML Audio. We’ll show you how to take advantage of the SQL-like data storage facility of HTML5. Then, we’ll make our game robust by carrying out its testing and debugging. Finally, we’ll dive into common errors and pitfalls that developers usually commit and a way to avoid them.

By the end of the course, you will be able to take full advantage of all the HTML5 features to create advanced and interactive games.

About The Author

Daniel Albu is a freelance interactive developer at Albu Interactive with more than ten years of experience in the production and deployment of rich media websites, games, and applications. He specializes in Flash development, and HTML5 game and application development.

Who is the target audience?
  • This video is for game developers/ game designers who have a basic understanding of HTML5, CSS, and JavaScript.
Compare to Other Game Development Courses
Curriculum For This Course
27 Lectures
02:20:13
+
CreateJS
5 Lectures 26:15

This video provides an overview of the entire course.

Preview 01:56

In order to assist us in creating the game while focusing mainly on the game logic and less on the infrastructure, we’ll use the CreateJS framework. 

CreateJS Overview
06:44

Various browsers treat sounds differently, and some don’t support all file extensions. We will make sure that all sounds are played in all browsers. 

Playing Sounds in Various Browsers Using SoundJS
03:46

In order to create a smooth animation between two states/positions of the same object, we’ll need to use tweening. 

Tweening Objects Using TweenJS
06:11

Sometimes, we need to use images in our games, in order to give the user the best experience possible, we’ll preload them before the game starts and provide the user with constant updates regarding the loading status while he/she’s waiting. 

Loading Graphic Assets Using PreloadJS
07:38
+
Game Outline
3 Lectures 13:15

In order to create the game, we need to add graphic elements which will represent the game elements. 

Preview 04:30

For the game to be engaging and visually attractive, we need to add a few animations to liven it up. 

Creating Basic Animations
03:39

A breakout game has elements in certain positions on screen, we need to place them correctly. 

Game Stage Creation and Object Positioning
05:06
+
Game Logic Part 1
7 Lectures 42:00

It’s always beneficial to plan the working of a game beforehand. Let’s look at it in detail. 

Preview 01:45

We’ll add the basic logic to the various elements on screen. 

Adding the Basic Game Logic – Part 1
06:19

We'll add the basic logic to the various elements on screen. 

Adding the Basic Game Logic – Part 2
04:39

We’ll add exact physics in order to give the game a more natural look. 

Adding the Game Physics – Part 1
08:20

We’ll add exact physics in order to give the game a more natural look. 

Adding the Game Physics – Part 2
05:58

We’ll add exact physics in order to give the game a more natural look. 

Adding the Game Physics – Part 3
07:42

We’ll add the visual depiction to our game for displaying the score and lives of data. 

Creating the Scoring System
07:17
+
Game Logic Part 2
4 Lectures 26:47

We need to add mouse controls. 

Preview 07:40

We need to add keyboard controls. 

Adding Keyboard Controls
08:45

We need to add support for touch events on mobile devices. 

Mobile Support
03:11

We need a way to save high scores between sessions. 

WebStorage – Saving the Game Data
07:11
+
Testing/Debugging the Game
5 Lectures 18:17

How do we see the game’s log on Chrome to see what happens in the background? 

Preview 06:27

How can we see what’s the call stack of a certain function? How can we stop the app from continuing to run in case a certain code is running? 

Debugging with Breakpoints in Chrome
03:07

How do we view the log and debug the game on Firefox? 

Firefox Debugging
02:45

How can we debug the game once we run it on an Android device? 

Debugging on Android
02:42

How can we debug the game once we run it on an iOS device? 

Debugging on iOS
03:16
+
Wrapping Up
3 Lectures 13:39

Are there any problem which usually occur during development which can be avoided in advance? 

Preview 07:07

What to do in case we run into a problem during the development process. 

Troubleshooting
02:47

Where do we go from here? 

Additional References and Wrapping Up
03:45
About the Instructor
Packt Publishing
3.9 Average rating
8,249 Reviews
59,126 Students
687 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.