I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

The Mid-Autumn festival

When the Mid-Autumn Festival is approaching, we should first resist a wave of typhoon, and then use Cocos Creator to write a simple scene of “Chang ‘e flying to the moon” when we are free

Let’s take a quick look at the effect:


Cocos Creator

The tool used for this production is Cocos Creator, which is a game development engine. There are many game development engines on the market now, for example, the most famous one should be Unity.

Compared to Unity, Cocos Creator has the following advantages for me:

  1. Cocos Creator free
  2. Easy to get started and useJavaScriptorTypescript
  3. Chinese development Document
  4. The interface, similar to Unity, is data-driven

Official website: www.cocos.com/


The static layout

First, create an empty project in Cocos Creator. My roommate’s editor version is 2.4.5, which is also a relatively new editor version. Click Empty to create and open. (Initial generation edits are slow)

Current project Interface:

In the lower left corner of the interface, there is the resource manager. One of the most important folders in a project is Assets, where all local resources, scripts, and third-party library files are stored in the game. Only contents in Assets can be displayed in Explorer. After each file in assets is imported into the project, a.meta file with the same name is generated to store the corresponding resource configuration and index information. . Meta files need to be submitted to version control.

Create a script folder and a texture folder in the resources folder, and create the sceneMoon, double-click to open the scene.

Create the Sprite node for the background bg

Use the background image you prepared as a SpriteFrame, and in the scene editor you can see the background at night.

You can then drag the Person image directly into the background as a child node. You can resize nodes in the property inspector.

Now run the program above, you can see the corresponding effect in the browser

Then add elements like the moon and clouds to the scene


Adding a Physical System

After completing the above steps, the page now looks like a painting and Chang ‘e has no gravity to pull her back to the ground, so it’s time to use a script and physical system. I use TypeScript as a script format.

In the scripts folder, create a bg.ts.

Edit the bg. Ts:

Add the onLoad () : cc. Director. GetPhysicsManager () enabled = true, the words can add physical manager. Then drag bg.ts to the BG node

Add the physics component Box to Chang ‘e and resize the PhysicsBoxCollider to the edge of Chang ‘e’s foot. (Editing a physical component requires Editing)

Create a group

Create three groups: Person, Floor, and Cloud. And the people and the clouds, and the people and the ground generate group pairing.

Change chang ‘e’s Group setting from default to Person. Refresh the browser interface at this time, the browser chang ‘e will fall out of the scene.

So you need to add physical components to the background as well. After adding the physical components, you can set the type of the RigidBody of the BG node to Static and drop the background down.

The chang ‘e falls from above and stops when it hits the set of physical components, as if it were on the ground. Can be in before the bg. Ts set in the cc. Director. GetPhysicsManager () debugDrawFlags = 1; “, so you can see the current effect.

Next, set the cloud to a similar physical component, of course the cloud also needs to be set to static to prevent sliding.


Movement script

Create a movement script for Person.ts.

Keyboard buttons for listening:

cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this); 
Copy the code

Determine the character’s direction and action by pressing the keyCode.

cc.macro.KEY.a
Copy the code

Use onBeginContact to listen to the collision, then check the Enabled Contact Listener of RigidBody on the character node of chang ‘e.

Person. Ts code:

@ccclass
export default class Person extends cc.Component {
    // Character speed
    @property(cc.Integer)
    speed:number = 0;
    // Character orientation
    sp:cc.Vec2 = cc.v2(0.0);
    lv:cc.Vec2 = cc.v2(0.0);
    private Input:{} = { };

    @property
    jumpHeight:number =  0;
    // The duration of the protagonist's jump
    @property
    jumpDuration:number = 0;
    // If you are jumping
    isJumping:boolean = false;

    // LIFE-CYCLE CALLBACKS:
    onLoad () {
        // Initialize keyboard input listening
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this); 
    }

    onKeyDown(event: cc.Event.EventKeyboard) {
        this.Input[event.keyCode] = 1;
    }
    onKeyUp(event: cc.Event.EventKeyboard) {
        this.Input[event.keyCode] = 0;
    }

    moveState() {
        let anim:string;
        let scaleX = Math.abs(this.node.scaleX);
        if (this.Input[cc.macro.KEY.a] || this.Input[cc.macro.KEY.left]) {
            this.sp.x = -1;
            this.node.scaleX = scaleX;
        } else if (this.Input[cc.macro.KEY.d] || this.Input[cc.macro.KEY.right]) {
            this.sp.x = 1;
            this.node.scaleX = -scaleX;
        } else {
            this.sp.x = 0;
            
        }
        if (this.Input[cc.macro.KEY.w] || this.Input[cc.macro.KEY.up]) {
            this.sp.y = -1;
        } else {
            this.sp.y = 0;
        }

        if (this.sp.x ! =0) {
            this.lv.x = this.sp.x * this.speed;
        } else {
            this.lv.x = 0
        }

        if (this.sp.y ! =0) {
            if (this.isJumping) return;
            cc.tween(this.node).then(this.runJumpAction()).start(); }}// Jump method
    runJumpAction():cc.Tween {
        this.isJumping = true;
        // Jump up
        let jumpUp = cc.tween().by(this.jumpDuration, {y: this.jumpHeight}, {easing: 'sineOut'})
        return jumpUp;
    }
    onBeginContact(contact:any, selfCollider, otherCollider) {
        this.isJumping = false;
    }
    update (dt) {
        this.lv = this.node.getComponent(cc.RigidBody).linearVelocity;
        this.moveState();
        this.node.getComponent(cc.RigidBody).linearVelocity = this.lv; }}Copy the code

Drag the person. Ts onto the person node and set the speed, JumpHeight, and JumpDuration JumpDuration properties.


Run the program to see the current effect:

On the above, according to the physical component style can be bg. Ts of cc. Director. GetPhysicsManager () debugDrawFlags = 1; Divide by, or set to 0.


At the end

A simple Chang ‘e moon run so done, I hope you have a happy Mid-Autumn Festival!