O'Reilly logo

Building HTML5 Games with ImpactJS by Jesse Freeman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Level Editor

One of the best features of Impact is its level editor called Weltmeister. It is located in the libs/weltmeister folder inside the Impact project. We will go through using this editor in the next chapter, but I wanted to take some time to highlight its features and how to use it.

You can pull up the level editor anytime by navigating to the root of your project’s domain and loading the weltmeister.html file. You will be presented with this screen:

This is the screen you will see after loading Weltmeister for the first time. Select a layer to see the grid numbers.

Figure 1-3. This is the screen you will see after loading Weltmeister for the first time. Select a layer to see the grid numbers.

When you load the editor for the first time, you are presented with an empty untitled.js map file. Along the top are your main controls such as Save, Save As, New, and Load. Reload Images allows you to make visual tweaks to your map without having to do a hard refresh. Finally, on the far right, you will see a large arrow that shows/hides the layers, and below that are your map’s layers. By default, there is an entities layer, which is where your player, monster, and other in-game elements will go. You can add new layers at any time by pressing the plus sign on the right of the Layers label.

Note

Layers simply allow you to draw level tiles onto the stage just as you would use a stamp tool in a painting program. If your game’s level is incredibly detailed, you may want to break out parts of the level’s tiles into a background, middle ground, and foreground layers as well as creating other layers for collision detection and additional details. Anything that moves in the game will go into the entities layer.

Before we can start making levels for our game, we need to create some graphics. Let’s take a look at the asset pipeline, and more importantly, how to create graphics for Impact projects.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required