Game Development Reference
In-Depth Information
Let's combine your new inheritance skills in the final project for this chapter. The
SimpleButton
class will be used
to create a series of buttons to control a custom, animated sprite. The
Preloader
class will also be used to load in the
sprite sheet image.
Running Man
As you know, Grant Skinner is the creator of CreateJS, and we will be using an illustrated version of him in this project.
Running Man is a simple application that will utilize the inheritance techniques that you've learned in this chapter.
The
SimpleButton
class will be used to create some buttons that will call on methods in a custom sprite named
Runner
. The following is a list of the features and procedures needed for this exercise.
Create a custom sprite named
•
Runner
.
Preloader
class to load in the assets needed for the sprite sheet used in
•
Use PreloadJS and the
the
Runner
sprite.
Give the sprite a series of functions that will play various animations declared in its sprite
•
sheet's data.
•
Use the
SimpleButton
class to create buttons that will fire these methods on the instance
of
Runner
.
Setting Up the Game Files
Set up the HTML document that includes a
canvas
element and the necessary CreateJS file includes. You'll also create
a few JavaScript files: one for the application (
runningMan
.
js
) and another for the sprite class (
Runner.js
). Be sure to
also include the UI components you built earlier in this section (see Listing 8-16).
Listing 8-16.
HTML File for Running Man
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="lib/easeljs-0.7.1.min.js"></script>
<script src="lib/preloadjs-NEXT.min.js"></script>
<script src="Runner.js"></script>
<script src="SimpleButton.js"></script>
<script src="Preloader.js"></script>
<script src="runningMan.js"></script>
</head>
<body onload="preload()">
<canvas id="canvas" width="800" height="600" style="border: black solid 1px;background-color:
#add8e6"></canvas>
</body>
</html>
