For more than a decade Flash dominated in the world of internet game development. The rise of mobile changed all that. With this course, I will show you how to leverage the knowledge you learned in flash by applying it in a new way with Html5 using the Phaser library. Once with Flash, we were able to build once and publish everywhere, and now we can again! This course will match specific Flash tasks, like adding images to the library and stage, with the Html5 equivalents. We will then take the newfound knowledge and apply it to more building banners and games with code that will work equally well from laptop to smartphone! My goal is to help you learn to use your existing skills to make awesome Html5 content!
This lecture contains a short overview of what we be covering in this course.
Let's go over some of the tools needed to write html5 code. Unlike Flash you can get everything you need free!
This lecture will show you how to set up the Xammp server on your computer. Setting up a local server saves a lot of time for development.
The three main functions that will help you to build your Html5 content.
Let me show you how to place your Html5 content anywhere on the page.
This lecture shows you how to change the background color of the stage.
This lecture covers the JS equivalent of the trace function
Here we cover role of scope in Phaser, which is a little stricter than it was in Flash.
Phaser has a virtual library similar to the one we used in Flash. Here we cover adding in an image.
This lecture covers adding a sound to the library
This lecture covers adding a sprite sheet to the library. Sprite sheets can define animations and will take the place of movieclips.
Here we cover adding a sprite to the stage. The equivalent of addChild in Flash
Here we cover defining and playing a sound from the libary
One of the reasons I chose to work in Phaser is how many Flash properties transfer over. This lecture covers some of those simulaties.
This lecture covers placing a sprite in the center of the screen.
This lecture covers anchor points. They take the place of the registration points found in Flash.
Here we set up an animations inside a sprite using a sprite sheet from the library. Animations take the places of MovieClips.
This lecture covers the differences in scaling sprites between Flash and Phaser
This lecture shows you how to quickly place a sprite in a random location.
This lecture covers how to set an event listener on a sprite.
This lecture introduces us to Tweens
This lecture shows how we can use different properties in tweens such as alpha.
Because scaling works differently in Phaser, there is a small trick to using scaling with tweens, and we cover that here.
Easing a tween in Phaser is very similar to Flash, but we have a few more options.
This lecture shows you how to add a tween complete event listener to your tweens.
Unlike Flash you can write one tween for multiple properties. This is a very nice feature.
This lecture shows how to code a button from a sprite sheet.
This lecture introduces adding text to the stage.
This lecture shows how to change the text size and color
No more embedding fonts!
This lecture covers how to make fancy text with the web fonts we loaded in the last lecture.
Groups are a very powerful feature in Phaser. This lecture introduces them.
This lecture shows how to use a group to create multiple instances of the same sprite. Very useful for putting bad guys into games!
This lecture shows how to loop through all the sprites in a group and update their properties.
This lecture shows how to use Prefabs, in much the same way that we used sprite classes in Flash.
Now that we've got the basics, let manually convert a Flash Banner to Html5
Adding in the banner's images
This lecture will show you how to make a virtual timeline to help turn timeline animations to Html5 code.
Now that the images are loaded, let's make them move!
Adding in the text needed for the banner
Just a few final steps and our banner is complete!
Here's the fun part! Using our new Phaser knowledge to build a game!
Getting everything set up for the game!
Let's add in a scrolling background. Much easier in Phaser!
Because mobile devices vary in size we need to adjust our game to fit.
Setting up the animation for our superhero!
This lecture covers how to handle positioning when we are unsure of the size of the stage.
This lecture covers changing the position of the main character when the stage is clicked.
Setting up the first enemy - The Fireball!
This lecture covers setting up the rest of the enemies
Making multiple copies of the bad guys
This lecture covers adjusting the position of the enemies based on a ratio of screen size.
Adding random bad guys to the stage
This lecture shows you how to move the enemies by looping through the group
Let's look at how to space the sprites out so they come at regular intervals.
Adding the score to the game.
Make the game more challenging by speeding up as we go along.
So far our cat has been rolling along without any problems, but time to detect collisions!
Let's add some animation with a tween when our cat is hit!
Here we cover adding a new state for our game over screen.
Adding and decorating a title screen.
Before we add sounds we need to give the player a way to turn on and off the sounds and music. We can make a toggle button out of a sprite sheet.
Here we add in the sound effects to the game!
Our game is almost complete! Let's just add in the background music and make it loop!
An annoying little browser bug that you should be aware of.
Wrapping things up!
I've been a coder since I was a kid and I've always loved making games. As I got older that got into serious application programming as well, but games have always been my passion. I've been working professionally as a programmer for the last 15 years. I've worked all around the US, and a few years in Asia, for companies from around the globe. I've estimated I've made over 300 games in my career, and I'm nowhere near done!