In this task, we will decorate the game with bitmap graphics. We replace the current code-drawing shape with bitmap graphics drawn in the painting software.
We will need several bitmap images in this task. They will be used as images for the background, box, heart, and the deadline. Please find them attached in the code bundle.
Let's start by replacing the canvas's background and input.
- The following code elements are the HTML elements and we can set the graphics in CSS:
canvas { background: #333 url(../images/bg.png); } .control { background: gray url(../images/input_button.png); } .control:active { background: white url(../images/input_button_hover.png); } - Then, we use bitmap to replace the canvas's
RectShapefunction. We start with the box:function Box(){ createjs.Container.call(this); var bitmap = new createjs.Bitmap('images/box.png'), this.addChild(bitmap); } - Then, we replace the
deadlineshape with the bitmap:var deadline = new createjs.Bitmap('images/deadline.png'), - Finally, we replace the red square shape into a heart shape image to represent the remaining lives:
var heart = new createjs.Bitmap('images/heart.png'),
What we have done is change the rectangular shape to a bitmap graphic. Because we have put the numbered box as a container, we are free to change what's inside the container without the need to change any of the logical part. It is independent of whether we use a shape or a bitmap to display it.
Specifically, we use pixel art because it looks better in a smaller dimension.
The RectShape function is a useful class that helps to build the game's prototype. We can rapidly represent game elements with colored shapes. Once we get the game logic implemented, we can replace the shape into gorgeous graphics.
From the first task until just now, we have used RectShape to represent boxes, lives, and the falling deadline. Now, its job is done and we can get rid of it until we need a new game element in future.