Step‑by‑Step Guide to Building a Simple Cocos Creator Game

This guide shows how to set up a basic 2D game in Cocos Creator, covering scene preparation, script creation, gameplay logic, scoring, failure handling, and sound integration.

1. Configure Scene Assets

Inspect the assets folder, create a new Scene named game , and add a Canvas node. Drag background, ground, and player images onto the Canvas, adjust their Anchor and Size using the rectangle transform tool, and rename the player node to Player .

2. Write Player Script

Create a scripts folder, add a JavaScript file Player.js , and define the component:

cc.Class({
    extends: cc.Component,
    properties: {
        jumpHeight: 0,
        jumpDuration: 0,
        maxMoveSpeed: 0,
        accel: 0,
        jumpAudio: { default: null, url: cc.AudioClip }
    },
    setJumpAction: function () {
        var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        var callback = cc.callFunc(this.playJumpSound, this);
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback));
    },
    playJumpSound: function () {
        cc.audioEngine.playEffect(this.jumpAudio, false);
    },
    setInputControl: function () {
        var self = this;
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, function (event) {
            switch (event.keyCode) {
                case cc.KEY.a: self.accLeft = true; break;
                case cc.KEY.d: self.accRight = true; break;
            }
        });
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, function (event) {
            switch (event.keyCode) {
                case cc.KEY.a: self.accLeft = false; break;
                case cc.KEY.d: self.accRight = false; break;
            }
        });
    },
    onLoad: function () {
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);
        this.accLeft = false;
        this.accRight = false;
        this.xSpeed = 0;
        this.setInputControl();
    },
    update: function (dt) {
        if (this.accLeft) this.xSpeed -= this.accel * dt;
        else if (this.accRight) this.xSpeed += this.accel * dt;
        if (Math.abs(this.xSpeed) > this.maxMoveSpeed) {
            this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
        }
        this.node.x += this.xSpeed * dt;
    }
});

3. Create Star Prefab and Script

Drag a star image into the scene, convert it to a Prefab, and attach Star.js :

cc.Class({
    extends: cc.Component,
    properties: {
        pickRadius: 0,
        game: { default: null, serializable: false }
    },
    getPlayerDistance: function () {
        var playerPos = this.game.player.getPosition();
        return cc.pDistance(this.node.position, playerPos);
    },
    onPicked: function () {
        this.game.gainScore();
        this.game.spawnNewStar();
        this.node.destroy();
    },
    update: function () {
        if (this.getPlayerDistance() < this.pickRadius) {
            this.onPicked();
            return;
        }
        var opacityRatio = 1 - this.game.timer / this.game.starDuration;
        var minOpacity = 50;
        this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity));
    }
});

4. Game Controller Script

Create Game.js and attach it to the Canvas. The script manages star spawning, timing, scoring, and game over logic:

cc.Class({
    extends: cc.Component,
    properties: {
        starPrefab: { default: null, type: cc.Prefab },
        maxStarDuration: 0,
        minStarDuration: 0,
        ground: { default: null, type: cc.Node },
        player: { default: null, type: cc.Node },
        scoreDisplay: { default: null, type: cc.Label },
        scoreAudio: { default: null, url: cc.AudioClip }
    },
    onLoad: function () {
        this.groundY = this.ground.y + this.ground.height / 2;
        this.timer = 0;
        this.starDuration = 0;
        this.score = 0;
        this.spawnNewStar();
    },
    spawnNewStar: function () {
        var newStar = cc.instantiate(this.starPrefab);
        this.node.addChild(newStar);
        newStar.setPosition(this.getNewStarPosition());
        newStar.getComponent('Star').game = this;
        this.starDuration = this.minStarDuration + cc.random0To1() * (this.maxStarDuration - this.minStarDuration);
        this.timer = 0;
    },
    getNewStarPosition: function () {
        var randX = cc.randomMinus1To1() * this.node.width / 2;
        var randY = this.groundY + cc.random0To1() * this.player.getComponent('Player').jumpHeight + 50;
        return cc.p(randX, randY);
    },
    update: function (dt) {
        if (this.timer > this.starDuration) {
            this.gameOver();
            return;
        }
        this.timer += dt;
    },
    gainScore: function () {
        this.score += 1;
        this.scoreDisplay.string = 'Score: ' + this.score.toString();
        cc.audioEngine.playEffect(this.scoreAudio, false);
    },
    gameOver: function () {
        this.player.stopAllActions();
        cc.director.loadScene('game');
    }
});

5. Add UI Elements

Create a Label node named score under Canvas, set its position to (0,180), font size to 50, and initial text to "Score: 0". Drag the label onto the scoreDisplay property of the Game component.

6. Integrate Audio

Assign assets/audio/jump to the jumpAudio property of the Player component and assets/audio/score to the scoreAudio property of the Game component. The scripts already call cc.audioEngine.playEffect at the appropriate moments.

7. Test and Iterate

Press the preview button, click the game canvas to enable keyboard input, and use A/D keys to move the player while collecting stars. Adjust properties such as jump height, speed, star duration, and audio files in the inspector to fine‑tune difficulty and feel.

By following these steps you obtain a complete, playable platformer with movement, jumping, star collection, scoring, failure detection, and sound effects, illustrating core Cocos Creator workflows.