Game Development Reference
In-Depth Information
var stage;
var canvas;
var spritesheet;
var screen_width;
var screen_height;
function init() {
window.game = window.game || {};
game.main = new game.SpaceHero();
}
</script>
</html>
As you can see, there are quite a bit of JavaScript files in this application. We will be covering each of these new
scripts, as well as the reuse of old ones, in depth in this chapter.
Reviewing the Sprite Sheet Files
The sprite sheet files for this chapter are available with the topic's source code download. The animation frames for
this sprite sheet were created in Flash CC and imported into Zoe using the same procedures learned in Chapter 6.
Start by opening up the sprite sheet image
sprites.png
.
The
sprites.png
sprite sheet file contains all graphics needed for the game, with the exception of the
background image, which was added to the DOM under the
canvas
element. Figure
11-2
shows the amount of
graphics needed for the animations and static sprites.
Figure 11-2.
The full sprite sheet image for all graphics and animations in Space Hero
The sprite sheet for Space Hero contains mostly animation frames for various elements in this high action game.
It also includes some bonus power ups and other sprites that can be used to further enhance the gameplay when you
complete this game project.
The Space Hero sprite sheet
JSON
object, created with Zoe, will be loaded in the preload process. Take a look at the
data now to get an idea how it is formatted and the amount of animations you'll be using in the game (see Listing 11-2).
