You need to have many tiles on stage so you can make them clickable and playable.
- [Instructor] Hello there. We are going to create the main game logic of the count game. We will place the background and multiple boxes on the stage. We also handle the click and tap event which we implement the logic to let the player count the number to the end. Then we will implement the game over logic. Now we move on to the first video in this section. Display multiple objects on stage.
In this video, we will add multiple game objects on the stage. We learn how multiple objects affect the display list hierarchy. In the Game class, we create a new method to generate multiple numbered boxes. That method takes a parameter as the amount. It uses loop to create NumberedBox object which we pass in the counting number. Then, we add each box to the stage. The reason that we loop in count down way is that we want to add the last number first and the first number last.
It's because the later we add a game object to the stage, the more it is in front than the other earlier added object. This is like when we are mapping layers in graphics software such as Photoshop. The newly layer is in front by default. We may also insert layer in between or rearrange the layers. CreateJS provides very similar layer concept. We want the player to count the game from one, two, and three, until the end.
So we want to place the smaller number in front of the others. In my CreateJS game, I often alias the canvas width and height to the stage object because later we may change the canvas dimension especially when we support retina display later in video three. The canvas width is changed. So we store the game width and height in the stage. We have generated the box position randomly in previous section.
It was width hardcoded value two hundred. Now we want to place the box in the stage area. This requires us to change the random logic to use the dimension of the stage but the box itself doesn't know anything about the stage and it shouldn't know the dimension too. To solve this issue, we move that code out and put in the Game class. We are ready to place the numbered box randomly on stage.
In the generateMultipleBoxes method, after we add the NumberedBox object, we set the x and y position randomly. But we don't want to place the graphics at the edge. That is why we take the box width and height into the calculation. This getBounds is to get the width and height of the game object. So we want to tell CreateJS library the dimension of the numbered box. Let's go back to NumberedBox class.
Before ending the constructor, we call the setBounds to set the dimension with a zero x, zero y, 50 width, and 50 height value. Now in the constructor of the Game class we call the generateMultipleBoxes method so that it executes our logic. Let's open the index.html in browser and we should see something like this.
The boxes are randomly placed. Some boxes may collapse together but the smaller number should be visible especially the number one is always on top of all others. We added the box in the game but we cannot interact with them yet. In the next video, we will add the click and tap event handling.
Note: This course was created by Packt Publishing. We are pleased to host this training in our library.
- Planning your first game
- Setting up your file structure
- Setting up HTML and JS
- Drawing basic shapes with EaselJS
- Implementing your first game object
- Creating the core game logic
- Adding graphics to your game
- Planning your second game
- Handling obstacle and hero collisions
- Making the hero run and jump
- Adding graphics and animations
- Polishing your final game
Skill Level Beginner
Q: Should the exercise files be run from a server or locally?
A: Please run the exercise files from a server as directed. The files will not work properly if run locally.