You need to add graphics to the game, so you must check and decide the dimensions of each game object and draw them.
- [Instructor] Hello, and welcome to the next section. In this section, we will polish the Count Game with several enhancements. We will add animation and interaction to our game objects. We'll allow the player to start over the game. We'll also add custom fonts to our number box. Then, we'll add audio effects. And lastly, we will deploy the game on the web with static site hosting. In this first video of this section, we will create an animation for the background and add an interaction to the number box.
It's an Adobe Animate document with file extension .fla. We created that in Section One for the game object graphics. So far, they're all static. Now in the game over view, we edit it to create animation on the background. We animate the background to make it appear as if many tiles are fading in. Here is the preview of what we will make. I intentionally made the animation slower so that you can have a glimpse of how it animates.
In the timeline, we create the final result. We create a little square box and make it a symbol. We name it BG Tile. We need a symbol to create fading animation later. Then we duplicate the little square box multiple times. For each square box, we move it around to fill the game area.
If there aren't enough square boxes, we duplicate more until the boxes can cover the entire game area. It's fine if some boxes are outside the game area. The boundary will be clipped in the canvas in HTML. Okay, now we have covered all of the game area. After we finish the final result, we select all the boxes. Right-click on it and select Distribute to Layers.
We select all the keyframes. The frame with a black dot is a keyframe. Then we drag all the frames to around 15th frame, which is about half a second. This sets the complete state of the animation. Next, we make sure that we've still selected all the keyframes. We are going to drag these keyframes to frame one again. But this time, we hold the Alt key when dragging them to frame one.
This duplicates the selected keyframes. We now have two copies of keyframes in each timeline layer. We want to set all the boxes in frame one to have zero opacity. To achieve that, we open the Property panel. Now the Property panel should be showing frame information. We click once on the selected boxes on the stage and the Property panel changes to the selected movie clip. In the Color Effect section, there is a style option.
We select Alpha, and then set the value to zero. Now we have many boxes that have the starting keyframe with opacity zero and the last keyframe with the opacity 100%. Right-click on the selected keyframes in frame one. Choose Create Classic Tween. That makes a blue arrow annotation in the frames area. In the Property panel, we find the Ease in the Tweening selection.
We set the value to 100, which means having an Ease Out timing for the Motion Tween animation. Now, randomly select some layers and move the entire animation right. Move them right one to several frames, like this. This is to create the effect of the boxes randomly fading in.
At the right side of the timeline, select an empty frame in a column across all the layers. Right-click on it and choose Insert Frame. This is to make sure that the Fade In animation holds the ending state. We create a timeline layer and add a keyframe at the last frame. Make sure that the last keyframe is selected. Then, open the Action window by going to Window and then Action.
We put in the Stop command to stop the animation to prevent it from replaying. When we add the game over view on the stage, it automatically plays the movie. After the playback reaches the last frame, it stops because our Stop script is there. Then all the square boxes stop there and we have a blue background as a result. Now, in the GameOver symbol, we replace the static background with our newly created animation.
You may wonder why the animation symbol is empty when dragged onto the stage. That's because it is a Fade In animation. The first frame is actually empty. But we can tell from the outline that the animation is in place. Let's test the game in our browser. When the game is over, the game over view appears with our animated background.
The animation plays only once and stops with a blue solid background. Besides the game over view animation, we want to enhance the number box object with mouse and tap interaction feedback. We need to hover and then click on Effect when the user interacts on the numbered box. We can do so by converting it into a button. In the Library panel, right-click on the NumberedBox symbol. Select Properties. Change the type from Movie Clip to Button.
After we've converted the NumberedBox to Button, we can add two more keyframes. Double-click on the NumberedBox symbol in the Library panel. Select Empty Frames in the Hit column. Right-click and choose Insert Frame. The second keyframe is for hover. The third one is for active state. We select the frames in both over and down of the background layer. Right-click and select Convert to Keyframes.
When it's over, we make the background slightly larger. When the mouse or pointer is down, we make the background slightly smaller. Here is the effect. I also need to repeat the operations for the Gradient Overlay. It depends on how many layers were used to create the background graphics. This is an optional step, but I usually do that. Let's get back to the stage. Select the testing NumberedBox.
In the Property panel, change the Instance Type from Movie Clip to Button. This setting is different from the Property in the Library panel. Property in the Library defines the original type of the symbol. The Property panel for this selected instance defines individual type. Next, we add interaction to the NumberedBox. Since we want to handle MouseOver, we need to enable it at the beginning of the game's initial logic.
It is disabled by default. If we take a look at the generated scripts from Adobe Animate, and search for "ButtonHelper," we can find a script like this one. As we mentioned, the button is actually a timeline where the second frame and third frame act as a special hover and mousedown status. So, if we put the button on this stage, it will play all the three frames and loop forever, like this one.
That's why we need to use a ButtonHelper. We copy it from the generated script file and paste it after we add the NumberedBox graphic in the NumberedBox class. We change the This instance to the Movieclip instance. Let's test the game in our browser. When we hover the mouse over the numbered box, the box is slightly larger. When we click on the box, the box becomes slightly smaller. If we test the game in mobile, the tap makes the box smaller, giving the player a feel of pressing down something.
We have enhanced the game object with animation and the numbered box. We learned to create a Fade In effect in Adobe Animate, and learned to use the ButtonHelper for mouse hover effects. In the next video, we will allow the player to start over the game by clicking on a restart button in the game over view.
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.