JS Development HTML5 Game "leisurely Koala" (a)

Yoyo Koala is a fun and test of judgment and response ability of the game, let us look at the open-source free Celadon engine is how to achieve this game.

(Click the image to go to the demo)

Source Code and resources download

This article is a total of three parts, this article is the first part, the main content is as follows:

1. Game function Analysis

2, the design of the main game module

First, the game function analysis

According to the game settings, parse out the main functions of the game, decompose into each function module, and then develop each function module code structure, as shown in:

Second, the design of the game main body module

2.1 Khao Lak

From the final interface effect of the game we know that the main module of the game is koalas, rattan, pillars. Each principal module is described below:

Koala: in the long koala game, we can see koalas have to walk, take swings, let go, drop, death and other actions, these can use the engine frame animation to complete, here does not describe each action of the production method, only to the koala "walk" action as the explanation, the rest of the action are similar. First of all, we need to add art resources to the engine, in the engine interface of the Atlas folder to create a new folder named [email protected], the suffix named @atlas is to put the packaged atlas into the album folder, drag the Koala picture resources into the [ Email protected] folder, as shown below:

Right-click [email protected] Select "RePack Texture atlases" Packaging Atlas, as follows:

After the packaged atlas is successful, we can see the Koala.bin file under the Atlas folder as follows:

The rest of the game's Atlas resources are added in a similar way to packaging, with more information on Atlas packaging to view the atlas. At this point, we can make the Koala frame animation, I take the Koala walk action as an example: we have [email protected] packaged into an atlas, making frame animation needs to use the image resources inside. The method is to first click on "Assets/atlas folder" and click "Right Triangle" as shown in:

Click the walk_1.png image in the gallery, and the right Inspector panel appears as shown in the following information:

Click "Edit Frame Animation" to enter the frame animation editing interface, such as:

Enter the action name, frame rate, whether to loop and add a picture for each frame. Drag the Walk_1-walk_4 picture in the gallery into the Frame animation table, and click Save to complete the frame animation, as shown in:

We can also see the actual in the preview box, the following is what we have just done walking frame animation, as follows:

More information on animating frames can be seen in frame animation.

2.2 Rattan

Rattan: in the long koala game, we can see that when the koala catches the cane, the koala will follow the cane to do the pendulum movement. The implementation of the pendulum movement of rattan can use the engine to provide tweenrotation animation, in particular, we first create an empty node in the engine editing interface hierarchy the name of swing, and then create an image node under the Swing node, This node is used to display the rattan, at which point we need to mount a tweenrotation animation on the swing node to achieve the pendulum movement of the cane: first click on "Add Component" on the rightmost Inspector panel of the engine editor ( Note: The engine editing interface has an English-Chinese editing interface, the article uses an English editing interface, such as:

Click on the Tween button, the following interface appears:

The tweenrotation in the selection completes the mount of the Tweenrotation component, and the interface after the mount is completed is as follows:

We want the effect of the rattan to be oscillating, and it has a speed of acceleration. These can be implemented by setting up the Tweenrotation component, first we set the From value, which represents the angle at which to start, and the to value to reach an angle, for example: I set the from for 40,to to -40,play Style (There are three types of playback type: once (play once), loop (looping), Pingpong (round-trip)) set to Pingpong,curve for the animation to run the curve, set this value to achieve the desired effect, duration the time required to play the animation. The value of the curve is set as follows:

The aim of this curve is to hope that the cane has tangential acceleration.

After setting the above property values, the effect is as follows:

In fact, we can also set the value of play style to loop, and change the value of curve accordingly, the value of curve is set as follows:

Also can achieve the above effect, more tween animation can be see tween.

Another detail is that in the game, koalas at the bottom of the rattan, koalas will follow the cane to do the pendulum movement. We can set the koala as the child node of the rattan, and set the koala's anchor point to the center of the bottom of the rattan (for specific information about the anchor point to see the anchor point), the property value of the Koala node is set as follows:

So the koala can follow the cane to do the pendulum movement, as follows:

2.3 Pillars

pillars: in this game, using three pillars for the loop movement, the pillars are stored in the array, the array labeled 1 of the column as a platform, when the koala successfully jump to the platform, the array labeled 0 column is deleted, and after the array according to the level configuration of the column information to add a column to the array, Loop in turn. In the layout, the front and back columns are fixed to a width of 640, such as:

So that we can fix the position of the x-axis of the pillar, for example: The x-coordinate of the latter pillar is the x-axis coordinate of the previous pillar plus 640 minus the width of the latter pillar. The next article will explain the game's implementation.

JS Development HTML5 Game "leisurely Koala" (a)