Introduction

Despite the prejudice against Cocos2dx on Zhihu, it’s better to try different game engines rather than hesitating about which one to use. Moreover, this software was developed by Chinese developers, so it shouldn’t be too difficult to learn.

Although I haven’t learned JavaScript before, it seems possible to look up references while writing. JavaScript tutorial: http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

The current version of Cocos Creator is 1.5.1, and there’s a detailed manual on the official website at http://www.cocos.com/docs/creator/. This article is a simplified version of the “Quick Start” chapter, with improved gameplay elements.

Installation

Installation on Windows is straightforward. For Mac installation, there are a few things to note. After downloading the installation package from the official website and dragging it to Applications, when you open it, you’ll see a warning that the application is from an untrusted developer. In this case, open System Preferences > Security & Privacy > General, where you’ll see an “Open” button. After opening it this way, you won’t be reminded again.

Quick Start

From the dashboard, you can create a new project or open an existing one. According to the tutorial’s quick start section, we can download an initial project from this address: Download Initial Project. Or click here to download: https://github.com/cocos-creator/tutorial-first-game/releases/download/v1.2/start_project.zip

The final game effect of this quick start is like this: http://fbdemos.avosapps.com/star-catcher/. This game is somewhat similar to coin-catching games, but more difficult. The game has a very steep learning curve. Due to the monster’s horizontal acceleration being difficult to control and its jumping up and down, it’s almost impossible to catch the stars. There’s also no storyline. We should make it more fun.

After opening the project, let’s learn about the interface. The resource panel is in the bottom left. In the initial project, a project directory has already been established with the most basic resources and directory organization. “Assets” means assets, and under this main directory, there are three subdirectories containing fonts, audio, and image resources.

Creating a Scene

Scenes are crucial because they contain game scripts, and scenes are automatically loaded when the game starts. Click the plus sign under assets in the resource panel to create a scene, rename it to “game”, and double-click to open it.

The hierarchy manager in the upper left shows the relationships between nodes in the current scene. In this game scene, there is only one root node, canvas. Currently, this node is empty, meaning nothing will be loaded.

Click the root node in the right data panel to set the resolution of the root node. The height of the resolution is set to adaptive, always 960x640, consistent with the aspect ratio of the first-generation iPhone. I guess this resolution should be dp rather than pixel.

Scene Graphics

Drag the background resource onto the canvas, making the background a child node of the canvas. Be careful not to make the background another root node. Use Cmd+S to save the changes. Select the background image in the scene, then find the fourth button of the transform tools in the upper left, which are translation, rotation, scaling, and rectangular transformation. Select rectangular transformation and transform the background into a size that can cover the scene, as shown below.

The above steps can also be done by directly setting the properties of the background, setting the position to 0, 0, and the width and height to 1600 and 800.

Use the same method to add the ground. Use the same method to insert the little monster and rename it to “player”. The default anchor point of the image is the center position. Here, set the y value of the anchor to 0.

Creating Scripts

Then comes an amazing moment: the tutorial actually says it doesn’t matter if you don’t know programming, you can let your programmer friend solve it. Indeed, all I’m missing now is a programmer.

Create a JavaScript script file at the location of the player resource in the image below, and open it.

Insert the following content in properties, which are the physical properties of the little monster:

        jumpHeight:0,
        jumpDuration:0,
        maxMoveSpeed:0,
        accel:0,

Select the little monster image, find “Add Component” in the property box, add the player script to the player image, and set the relevant parameters.

Improving the Script

Let’s continue to add other functions to the script. First is the jumping action.

Add this section below properties:

    setJumpAction: function(){
        var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0,this.jumpHeight)).easing(cc.easeQuadraticActionOut());
        var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0,-this.jumpHeight)).easing(cc.easeQuadraticActionIn());
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
    },

moveBy is an official API. Looking up its usage in the official API, the first parameter is the movement duration, and the second parameter is the movement position. Obviously, it moves up a certain distance. The easing that follows generates a gradual motion, producing easeQuadraticActionIn and Out, which are quadratic curves. The original tutorial used cubic curves, which differ too much from physical movement in the real world.

Add the following code to the onLoad method to start the animation:

    onLoad: function () {
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);
    },

Now click the play button to view the initial effect.