Learn How to Create a Classic 2D RPG Using HTML5


html5gameWell Day 1 of the Developing 2D Games with HTML5 is in the bag! What a blast! We covered some really cool topics, so I thought I should put together a little recap (This doesn’t mean that you shouldn’t watch Day 1 when it comes out on-demand! We go into a lot more depth than below.) Oh and, of course, if you find the below of interest, make sure to join us for Day 2 (October 9th from 9am-1pm PST).

Ok, so lets go over the list of topics we covered:

  • Getting setup
  • Displaying sprites/images
  • Player control
  • Handling Collision 

Getting Setup

In the first module of the video we look at how to get started. I point out where to download Cordova for Windows Phone and EnchantJS. We go through the steps of installing the Cordova template in Visual Studio. Then we move on to setting up our game project and importing EnchantJS inside of Visual Studio. This is a very useful module even if you are just interested in how to setup Cordova projects in Visual Studio.

Displaying sprites/images

The next big topic we cover is how to create and display sprites (images). We look at how to create sprite sheets for multiple characters and objects. We also talk about how sprite sheets are used in animation and how to set this up in our game project. Creating tile maps using simple array setups will be covered and we will even cover how to create cool map layering effects. This is a very cool section that should be of interest to all developers doing 2D development.

sprites

Player control

rpgcapAfter we cover displaying sprites we continue on with how to move a sprite. We discuss and look at an implementation of simple player movement controls (Up, Down, Left, Right) and simple button input (action button). In our example we not only implement keyboard controls, but in the spirit of building a cross-platform game, we show you have to include touch controls. We even show you how to use EnchantJS’s awesome plugin’s to display an on screen directional pad (D-pad).  This is a very important topic for game development and should make this section valuable to all game developers.

Handling Collisions

Since we have our player sprite displayed and running around the screen the next step would be to restrict them inside the viewable area and to not let them run through solid objects. So that’s were collision detection comes in and is the topic of the last section of day one. We go over the basics starting with screen bounds checks. This is how we keep the player in the viewable area. We then cover object collision detection and look at a very cool implementation that allows us to use a new map layer to determine what the player collides with. While collision detection is a huge topic, we do our best to make it simple and understandable. This section is packed full of very useful tips and techniques that any developer will find incredibly useful.

We also go over other cool stuff like player status screen and stats. Along the way we also give tips and notes from our experiences building games. All in all we cover some major topics in day one. Hopefully you find it helpful and entertaining. Again, if you missed day one, don’t worry, it will be available on demand very shortly.

Join us for day 2!

Day 2 is going to be awesome! We will expand on what we have already built and move on to more advanced gameplay implementation. We will cover cool topics like: NPC (non player character) interaction, player inventory, NPC store system, and even a turn based battle system. Join us and bring some questions with you.

DOWNLOADS
Complete Project >>

Comments (0)

Skip to main content