In order to create the game, you need to add graphic elements which will represent the game elements.
- [Instructor] Hello and welcome to video 2.1. In this section, we'll have an overview of the game. In this video, we're going to discuss about creating the graphic assets. We'll start off with our HTML template. We have the stage which is defined as a variable, because we'll use it in several other functions, not just the init. So we place the variable outside the function and we initiate the variable in the init function.
What we wish to do now is create several constants which will hold the width and the height of the paddle and the bricks. So these are our constants. We have the paddle width which is 100 pixels, we have the paddle height which is 20 pixels, the bricks width which is 60 pixels, and the bricks height which is 30 pixels. In addition to the stage we'll define two other variables, one of them is the paddle and the other is the ball.
The paddle and the ball will be the graphic assets of the paddle and the ball. Like in previous videos, we'll define the ticker at 60 frames per second, and we'll also define in event listener that each tick will update the stage and this will save us calling the stage.update command in every frame. Next up, we want to create one ball, one paddle and one brick for now. In the next videos we'll create the brick wall, but for now we'll create only one brick.
So let's define the first function. First function will be createBrick. I'll paste the code and we'll discuss each command line. The create brick function will define the variable called brick, which creates one CreateJS shape. We'll fill the shape with a specific color; you can define any color you want. We'll draw a rectangle which starts off at the x and y axes of zero and zero, and its width is the bricks width constant we have defined earlier, and its height is the bricks height constant which we've defined earlier.
We'll call endFill which states that we completed the drawing of the shape and we'll add object we just created, which is the brick, to the stage. Next we'll create the ball. So the createBall function is very similar to the createBrick function, only this time we'll draw a circle. So we define the ball as a CreateJS shape, we fill it with the red color, and we draw a circle with the radius of eight pixels.
Its x-value will be 100 and its y-value will be 100. And we'll add it to the stage as well. Last but not least we'll define the createPaddle function. In the paddle function, we'll define the CreateJS shape inside the paddle variable. In this case, we're gonna use the chaining ability in CreateJS, and as you can see, I can chain the draw rectangle to the begin fill command.
So, unlike the createBrick function, in which we created it in several lines, you can see that I'm chaining the commands here and I'm basically creating the paddle using the begin fill, defining its color, drawing a rectangle in the location, width and height that want, and then I place it on the stage. So now all we have to do is call these functions in the init function. So we'll use the createBrick, we'll use the createBall, and we'll use the createPaddle.
So now let's see the outcome. Now that I refresh the page you can see that we've created one brick in the top left corner, one ball in the middle of the screen, and one paddle at the bottom of the screen. Congratulations! Now you know how to create graphic assets using CreateJS. In the next video, we're going to discuss about creating basic animations.
Note: This course was created by Packt Publishing. We are pleased to host this training in our library.
- Playing sounds in various browsers using SoundJS
- Tweening objects using TweenJS
- Creating graphic assets and basic animations
- Game stage creation and object positioning
- Adding the basic game logic
- Add the game physics
- Adding mouse and keyboard controls
- Debugging with breakpoints in Chrome
- Debugging on Android and iOS
- Character movement and input handling