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
O'Reilly logo

Chapter 4. Building A Game

In the following chapter, we are going to build a game called Resident Raver, in which the player controls an unnamed hero who is trying to escape a college dorm overrun by raver zombies. The hero has several weapons at his disposal to help him escape, while also navigating platform-based obstacles. I have gone ahead and created all the assets you will need for the final game.

Before moving onto the next section, make sure you copy over the contents of the media folder that is included in the book’s example files folder. This will contain all the assets you will need for the rest of the book. In it you will find sprites, map tiles, and sounds.

The media folder that contains the assets you will need to continue building your game.

Figure 4-1. The media folder that contains the assets you will need to continue building your game.

It’s okay to replace the default media directory with the one we will be using for this book.

Creating Our First Level

Now that we have learned about creating graphics for our game, we can start building our first level. Let’s open up Weltmeister and create a simple level. When you open up Weltmeister for the first time, you will see that an untitled.js file has been created for you, but that the level is empty. Before we can even start creating our level, we will need to add our map tile sprite sheet. Create a new layer and call it main. This is where we will start drawing our level. You can create this new layer by clicking the plus icon on the top right of the screen next to the Layers label.

This is what you will see after creating your new layer.

Figure 4-2. This is what you will see after creating your new layer.

When a new layer is created, its bounding box will be displayed showing the borders of the layer. You can’t draw tiles outside of this box. This is based on the layer’s dimensions, which are configured as part of the layer’s properties. Here is a summary of what each property represents:


This is the name of the layer. It can be anything you want.


This is the path to the Tileset image file you want to use for this layer. Clicking on this property will bring up a list of directories in your project file.


This represents the size of each tile in your sprite sheet. By default, it is set to 8.


This represents how large the layer is. By default, it is set to 30×30 tiles. Since tiles are set to 8 pixels by default, this layer is 240×160 pixels.


This is the distance from the camera, similar to Z index in HTML. This is useful for background layers you want to scroll at a different speed than the foreground layers to create a parallax scrolling effect.

Is Collision Layer

This toggle allows you to use the layer for collision detection, which we will cover later on.

Pre-Render In Game

This will pre-render your map, which can help increase the performance of your game, especially on mobile devices, but you will not be able to have animated tiles.


This is also a background layer property that allows you to repeat your layer when it scrolls by in the background. Think of this more as a texture that is repeated inside of the layer.

Now we are ready to make our first level. Let’s click on the Tileset field and select our map tiles. After clicking on the Tileset input field, you should see the root directory of your project from a drop-down menu, as seen in Figure 4-3. Select media, and there you can select dorm-tiles.png. You will also need to set the Tilesize to 16. Make sure to apply the changes so your selections are saved.

Use the drop-down menu to select the media directory where our tile sprites are.

Figure 4-3. Use the drop-down menu to select the media directory where our tile sprites are.

Now, click inside the map editor and press the space bar to bring up the tile painter (Figure 4-4).

All the tiles you can paint your level with.

Figure 4-4. All the tiles you can paint your level with.

The tile painter is very easy to use. While your tile set is visible, simply select the tile you want to use by clicking it with your mouse. The tile set will disappear and you will now be able to place your selected tile by clicking anywhere in the layer. You can also click and drag to create many tiles of the same artwork. When you want to change tiles, press the space bar again, select a new tile, and resume clicking to place the new tiles.

Notice the yellow box at the beginning of your sprite sheet that looks empty? Selecting this allows you to erase tiles you have already painted. Weltmeister automatically creates the empty tile for you so you don’t need to add it to your sprite sheet. Let’s draw the foundation of our level, shown in Figure 4-5.

Our game’s first level.

Figure 4-5. Our game’s first level.


When you start creating your own level, feel free to experiment with the tiles and add some variety to your textures. You don’t have to follow this example 100%, but I wanted to create something that was quick to make and had two different ground heights to it. It’s also important to note that I never start my maps at exactly 0,0, in case I need more space at the top of the lefthand side later on.

I know this level doesn’t look very exciting yet but, don’t worry, we will get into more complex level creation later on.

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