Starting today, we are going to practice using Cocos Creator to make the game we want.

Today we do one of the simplest game “drum celebrate the New Year”, this game is mainly by clicking the designated area to let the game characters beat the drum score, the more times the score is higher.

Adding a Home Page Scenario

In Cocos Creator, we put all resources, scenes, JS/TS files into assets.

We will create the Scenes directory in Assets to store the scene files with the.fire suffix.

Then go to the Scenes directory and right-click on new ->Scene

Change the scenario name to Home

Double-click the Home scene to enter the Home page scene.

Set the game scene resolution

After entering the scene, we started to set the resolution of the scene. If your project resolution is the same, we can talk about the design resolution in the project Preview in Cocos Creator’s Menu bar and Toolbar. In this game, we first go to Project -> Project Settings -> Project Preview and change the design resolution to 1136 x 640. At the same time, in order to adapt, do not let the screen have black edge, do not check the screen width and screen height.

At the same time, in the hierarchy manager, click on Canvas, find the Canvas property configuration in the property inspector on the right, set the resolution to 1136 x 640, and uncheck Fit Height and Fit Width.

If different scenes use different resolutions, set corresponding Canvas resolutions in different scenes.

Add home page background image

First we need to add an empty home page node under the Canvas

In Cocos Creator we can use nodes named in Chinese.

The reason for adding an empty node on the front page is for uniform management, just as we need to wrap a div around the child nodes in our layout. It is convenient for us to set the X and y axes of the child nodes in the home node.

After adding the home page node, add the Sprite component to the home page node and add the background image of the home page to the Sprite Frame property of the Sprite component. You can think of it as adding background images to your CSS.

Now we can see the background image in the scene editor.

And then we clickThe toolbarIn theOpen your browser to preview.

Do the pictures seem a little incongruous? It’s totally different from the design. The top doll is too tall and the bottom doll is too empty.

This is mainly because Cocos Creator uses the center of the node as the origin, rather than the upper left corner. According to the resolution we set is 1136 * 640. As the background image is larger than 640, and the calculation is based on the center, some parts above and below the background image are truncated. Only when the screen resolution of the device is greater than 640, the truncated part will be displayed.

If we want to display all of the top of the truncation, there are two ways to do this:

  • mobileHome pageThe node’syAxis, moving the node down.

In the scene editor we can see the top part of the image capture moved to the Canvas box

Preview the image in the browser and you can see the image move down and look a bit more harmonious.

  • Modify the anchorAnchorIn they, that is, change the origin of the node to move the node.

In the scene editor we can see the top part of the image capture moved to the Canvas box

Preview the image in the browser and you can see the image move down and look a bit more harmonious.

.

Add start button

Now let’s add the start button, which basically switches scenes from the home page to the game screen.

Add a start button to the scene

Adding images to a scene can be done in the following ways:

  • Drag the image directly toScene editor 中
    • Advantages: convenient, image size does not distort, drag directly to the specified location, automatically create nodes
    • Disadvantages: The created node is inCanvasDown, not in a node
  • Drag the image toHierarchical editor 中
    • Advantages: convenient, image size will not be deformed, you can choose to drag to a node, automatically create nodes
    • Cons: Location is alwaysX = 0, y = 0
  • createSpriteNode, setSprite Frame.
    • Advantages: Preset location
    • Disadvantages: Nodes need to be created and may be deformed

Once the button is added, we’re going to write the button click event.

Start button binding event

There are mouse event types and touch event types in Cocos Creator.

Mouse event type

This type can only be used on PC platforms

Enumeration object definition Name of the corresponding event When the event is triggered
cc.Node.EventType.MOUSE_DOWN mousedown Triggered once when the mouse is pressed over the target node area
cc.Node.EventType.MOUSE_ENTER mouseenter When the mouse moves over the target node area, whether pressed or not
cc.Node.EventType.MOUSE_MOVE mousemove When the mouse moves over the target node area, whether pressed or not
cc.Node.EventType.MOUSE_LEAVE mouseleave When the mouse moves out of the target node area, whether pressed or not
cc.Node.EventType.MOUSE_UP mouseup Triggered once when the mouse is released from the down state
cc.Node.EventType.MOUSE_WHEEL mousewheel When the mouse wheel rolls

Touch event type

This can only be used on mobile platforms

Enumeration object definition Name of the corresponding event When the event is triggered
cc.Node.EventType.TOUCH_START touchstart When the finger contact falls within the target node region
cc.Node.EventType.TOUCH_MOVE touchmove When you move your finger across the screen
cc.Node.EventType.TOUCH_END touchend When the finger leaves the screen within the target node region
cc.Node.EventType.TOUCH_CANCEL touchcancel When the finger leaves the screen outside the target node area

Add button click events

If you bind the Button component, you can also use the Click event, which is available on both PC and mobile.

In this case, let’s keep it simple and just click the event directly with the button.

Adding a Button component

Select the Button node startbTN and click Add Component at the bottom of the property inspector on the right to add a Button component

Once selected, you can see:

Create code file

We create a startbtn. ts in assets/Scripts to write the logic for the click event

Binding code file

In Cocos Creator you can treat each TS file as a component bound to a node. There are two ways to bind:

  • Drag the file directly into the property inspector on the right

  • Add a component to the property inspector

Once the binding is successful, we start writing the code.

Write the code

When we create startBtn.ts, Cocos Creator automatically writes some code for us.

const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {

    }

    // update (dt) {}
}
Copy the code

This section is the initialization code, which contains several lifecycle functions in Cocos Creator: onLoad, start, and Update.

For the life cycle, check out Cocos Creator’s Life Cycle Functions.

We need to change the code here:

NewClass is our class name StartBtn.

Delete the @ prototype

@property(cc.Label)
label: cc.Label = null;

@property
text: string = 'hello';
Copy the code

When we set @prototype in our code, we can see it in the editor. For example, we set the label and text properties here, and we can see it in the property inspector on the right.

Properties can be configured in parentheses after @prototype, such as type, hint, length…

@prototype works pretty well for us.

After modifying the code, we add the click event, and we see something like this:

const {ccclass, property} = cc._decorator; @ccclass export default class StartBtn extends cc.Component { start () { this.node.on("click",function(){ cc.director.loadScene("Game"); }}})Copy the code

The this.node in start is the startbtn node to which our script is bound.

To switch scenes, use cc.director. LoadScene (” scene name “); .

OK, we are done adding buttons and binding events here, next we need to add the Banner animation above

Banner entry Animation

Here we began to do the home page inside the last step, the top of the Banner entry animation, so that the home page more dynamic.

PNG we put in images and drag it directly under the home page node. Cocos Creator automatically creates the banner node. To distinguish the banner node we rename it to bannerNode, set the location and open the browser so that we see something like this:

Then add the Animate component under the bannerNode node.

After adding the Animate component to Cocos Creator, we also need to add our Animate Clip to Animate. An Animate Clip is a video player. An Animate Clip is a video player. An Animate Clip is a video player.

Now we start making the Animate Clip for the Banner.

Making the Animate Clip

Create the Animate Clip

Add an Animate Clip to Animate

Making the Animate Clip

Enter edit mode

First, select the bannerNode node, click the animation editor below, and click the Edit button in the upper left corner.

animation

In animation, there is one key thing involved: keyframes. A keyframe is what state a node is in at some point in time.

Like an animation of a person walking. At 0:0, the state is standing; 0:5, left hand forward, left foot forward, is the state of walking; At 0:10, right hand forward, right foot forward.

From 0:0–> 0:5 we have a Tween library to help us animate the transitions.

Once you know that, you can start making it.

The animation we want to implement is for the Banner to fall from the top down.

As you can see from the animation above, the Banner moves the Y-axis down from the top. We’ll just do the Y-axis properties on the keyframe.

As you can see from the GIF above, we did several steps:

  • addyattribute
  • 0-0 drawInsert the keyframe, willyMove up
  • 1:0Insert the keyframe, willyMove to final position

So the animation is done. But if you open up your browser right now you’ll notice that the animation doesn’t move because you left a box unchecked.

Check Play On Load to start playing the animation as soon as it finishes loading.

OK, our home page is finished now, the next step is to make the drum scene.

summary

Originally wanted an article to write the entire game production process, unexpectedly wrote so much, in order to let you have a better reading experience, had to be divided into two parts.

I also inserted some new knowledge points in the middle, if you are not very clear in the process of reading, please contact me.

If any mistakes are found in the middle, we strongly hope you can point them out!!

If you are interested, you can search “Squirrel make IT” on wechat and follow my official account.