You are previewing Building HTML5 Games with ImpactJS.

Building HTML5 Games with ImpactJS

Cover of Building HTML5 Games with ImpactJS by Jesse Freeman Published by O'Reilly Media, Inc.
  1. Introducing HTML5 Game Development
  2. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  3. A Note Regarding Supplemental Files
  4. Preface
    1. About This Book
    2. Who This Book Is For
    3. Who This Book Is Not For
    4. Conventions Used in This Book
    5. This Book’s Example Files
    6. Using Code Examples
    7. How To Use This Book
    8. Safari® Books Online
    9. How to Contact Us
    10. Acknowledgments
  5. 1. Introduction To Impact
    1. Why Use Impact?
    2. Setting Up a Local Environment
    3. Install WebStorm/PHPStorm
    4. Install Apache/PHP/MySQL
    5. Other Hosting Options
    6. Setting Up a New Impact Project
    7. Modules
    8. How Classes Work
    9. Core Classes
    10. How Inner Classes Work
    11. Level Editor
  6. 2. Working With Sprites
    1. Sprites and Sprite Sheets
    2. Scripting in Photoshop
    3. Working with Sprites in Photoshop
    4. Optimizing Sprites
  7. 3. Introduction To Game Design
    1. What is Game Design?
    2. Sample Game Design Document
      1. Gameplay
      2. Exploring a Map
      3. Combat
      4. Completing a Map
      5. Death
      6. Main Character
      7. Monsters
      8. Bosses
      9. Equipment
      10. Inventory
      11. Equipping Items
      12. Weapons and Armor
      13. Leveling Up
      14. Winning the Game
    3. Coming Up With Ideas
    4. Books to Read
  8. 4. Building A Game
    1. Creating Our First Level
    2. Saving/Loading Maps in Weltmeister
    3. CollisionMaps
    4. The Main Class
    5. Customizing the Main Class
    6. Key Binding
    7. Creating the Player Class
      1. Using Your Sprite Sheet
      2. Adding Simple Physics
      3. Defining Animation Sequences
    8. Creating a Monster Class
    9. Collision Detection
    10. type Property
    11. checkAgainst Property
    12. collides Property
    13. Health
    14. Weapons
    15. Firing the Weapon
    16. Add Multiple Weapons
    17. Killing Entities
    18. Respawning the Player
    19. Create Death Animations
    20. Adding Grenade Explosions
    21. Customizing the Camera
    22. Loading New Levels
  9. 5. Working With Text
    1. Creating Font Sprite Sheets
    2. Adding Text to Your Game
  10. 6. Working With Sound
    1. Adding Sounds
    2. Adding Music
    3. Mobile Browser Sound Compatibility Issues
  11. 7. Creating Game Screens and HUDs
    1. Extending Impact’s Game Class
    2. Creating a Start Screen
    3. Player Stats Screen
    4. Creating the Game Over Screen
    5. Adding In-Game HUD
    6. Game Rewards
    7. In-Game Analytics
  12. 8. Debugging Your Game
    1. Impact’s Debugger
    2. Publishing Your Game
    3. Baking Your Game
    4. Mobile Web Support
    5. Compiling for Native iOS
  13. 9. Wrapping Up
    1. References and Links
  14. About the Author
  15. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Loading New Levels

It looks like we are ready to load our next level. Loading levels in Impact is incredibly easy; we actually did it as one of the first steps in setting up this game. In this section, I will talk about building something we call a trigger, which is an invisible area of the map that executes an activity when the player enters it. In this case, we will be building a level exit.

Let’s start by creating a new entity file called levelexit.js and add the following code to it:

12    ig.module(
13        'game.entities.levelexit'
14    )
15    .requires(
16        'impact.entity'
17    )
18    .defines(function(){
19        EntityLevelexit = ig.Entity.extend({
21        });
22    });

Since our exit doesn’t have any graphics, we still need something to display in Weltmeister. Let’s add the following properties to our class:

_wmDrawBox: true,
_wmBoxColor: 'rgba(0, 0, 255, 0.7)',
size: {x: 8, y: 8},

These two properties with the _wm prefix tell Weltmeister how to render the object in the edit view, even though it doesn’t have an actual graphic in the game. So, Weltmeister will draw an 8×8 pixel blue box.

Now, we need a way to store the name of the next level we should load when the player collides with the level exit entity. Add the following property, which will be automatically set during our entity’s construction by the settings parameter we will pass in from the level data:

level: null,

Next, we just need to add some collision code. Let’s have our level exit check against any TYPE.A entities by adding the following property to the top of your class:

checkAgainst: ig.Entity.TYPE.A,

Now, we will override update() and remove its call to this.parent() so we are not spending render cycles trying to draw an entity with no graphics. This is a great technique for any kind of triggers you may build for your map that aren’t required to be updated visually on every frame:

update: function(){},

Finally, we will also override the check() method to handle the collision:

check: function( other ) {
    if(other instanceof EntityPlayer){
          if( this.level ) {
               var levelName = this.level.replace(/^(Level)?(\w)(\w*)/, function( m, l, a, b ) {
               return a.toUpperCase() + b;
     ['Level'+levelName] );

As you can see, we simply test that the instance of other (which is passed into the method during a collision) is an instance of the player’s class. This helps avoid any other entity of TYPE.A you may have accidentally triggered in the level exit.

The last part of the code simply does a regex cleanup of the exit’s level property to make sure it is capitalized correctly before calling This method is very important. You may remember that in our main class, it simply called loadLevel(). Well, loadLevelDeferred() waits until the main game’s update loop is completed before loading the level. This will help avoid any sudden redraw errors that may happen when trying to exit in the middle of the render loop.

Once we have our new EntityLevelexit, we can open up Weltmeister and create a small exit to place our entity in.

Now we can see where we placed the level exit in the editor.

Figure 4-33. Now we can see where we placed the level exit in the editor.

When you add the level exit, you will need to tell it what level to load. Click on it and go to the layer area just under where it says Entity Settings. You should see all the properties of your entity instance. For the Key, put level and in Value, put dorm2.

Setting up a level property on the LevelExit entity.

Figure 4-34. Setting up a level property on the LevelExit entity.

It is very important that you hit Enter/Return after adding a value to an entity’s Key, or it will not be saved. You will know it has been saved when you see the new Key/Value listed under the entity’s name and its x,y values, which are set up by default. You can modify any Key by clicking on it.

Modifying entity properties in the level editor.

Figure 4-35. Modifying entity properties in the level editor.

Now that our entity is configured, we need to create a new level. Name your level dorm2 and design it as shown in Figure 4-36.

The second level of our game.

Figure 4-36. The second level of our game.

As you build out your new level you may notice that the player graphic is missing in the editor. This happens because now our player is set to invincible when he is created, so he is invisible. If this is an issue, you can add the following two properties to your player.js class:

_wmDrawBox: true,
_wmBoxColor: 'rgba(255, 0, 0, 0.7)',

This will render out a red box for the player when in the editor, just like we did with our level edit.

We use a red box to display the invisible player in the level editor.

Figure 4-37. We use a red box to display the invisible player in the level editor.

The last thing you need to do is add the level and the level exit to the main.js requires block:


Once you have done this, refresh your game and you should be able to exit the level and go into the second level.

You may notice that the transition is a little jarring. There are a few things you can do to make sure that doesn’t happen, such as matching the level exit and spawn points up, or building a quick transition before exiting the level. Usually, games have an end-of-level summary screen that gets displayed, so that when the next level loads up the player doesn’t notice the transition as much. We’ll talk more about this later in the book.

The best content for your career. Discover unlimited learning on demand for around $1/day.