O'Reilly logo

HTML5 Canvas Cookbook by Eric Rowell

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

Creating level images and boundary maps

Now that we have sprite sheets for the hero and the bad guys, it's time to create a virtual world for them to live in. In Canvas Hero, our virtual world will be a single level that moves left and right as the player moves through it, which will contain walls, a ceiling, a floor, platforms, and holes. In this recipe, we'll go over the steps for making a level image as well as a boundary map image that graphically contains information about the bounds of the level and also identifies special zones with different colors.

How to do it...

To create the level image for Canvas Hero, we can use some prebuilt graphics downloaded from http://www.spriters-resource.com and add in new platforms, holes, and levitators using ...

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