Building a Multi‑Platform Mini‑Game with Cocos Creator: From Project Setup to Publishing

Last year a simple web mini‑game called “Merge Big Watermelon” became a viral hit on Weibo, attracting over 6.27 million players. The game was built with Cocos Creator, a complete game‑development solution that combines a visual editor, resource management, scene editing, preview, and multi‑platform publishing.

Game rules : Players tap the screen to drop random fruits (apple, orange, lemon, etc.). Identical fruits collide and merge into a larger fruit; the goal is to create the biggest fruit – a watermelon. The game ends when the stacked fruits exceed a red line at the top of the screen.

Cocos Creator overview : Cocos Creator bundles the engine, editor, and toolchain into a single application. It runs in modern browsers (Chrome, Firefox, Safari, Edge) and mobile WebViews, so developers do not need to worry about compatibility. The technical architecture consists of an Electron‑driven editor and two engine variants – a native C/C++ engine and an H5 engine written in JavaScript + WebGL + Canvas – allowing one codebase to be published to many platforms.

Project setup :

Download Cocos Creator from the official site and install it.

Create a new project, set the resolution to 640 × 960, and open the default game scene.

Add a background sprite, a floor image, a score label, and a death‑line sprite.

Project folder structure (illustrated with the official Hello‑World template):

assets – all local resources, scripts, and third‑party libraries. Each file generates a matching .meta file for import information.

library – generated assets after import; can be regenerated by deleting the folder.

local – editor configuration files.

packages – custom editor extensions.

settings – project build settings (package name, target platforms, etc.).

temp – temporary cache files.

project.json , jsconfig.json , tsconfig.json – project metadata and VS Code configuration.

.gitignore – automatically generated to ignore library , local , and temp .

creator.d.ts – provides IntelliSense for the Cocos API.

Editor composition : The main windows are the Asset Manager, Scene Editor, Hierarchy, Property Inspector, Component Manager, Toolbar, and Console. Nodes are displayed in the hierarchy; the Canvas node controls screen resolution, and components are attached to nodes to give them behavior.

Component‑based scripting (example of a basic script attached to the Canvas):

cc.Class({
    // cc.Class is a common API for declaring classes in Cocos Creator
    extends: cc.Component,
    properties: {},
    // LIFECYCLE CALLBACKS
    onLoad () { console.log("onLoad"); },
    start () { console.log("start"); },
    update (dt) { console.log("update"); },
    lateUpdate (dt) { console.log("lateUpdate"); }
});

The engine calls these callbacks at specific moments (scene load, first frame, each frame, after each frame, etc.).

Defining component properties (example for a fruit component):

properties: {
    fruitCount: 0,
    DeathNode: { default: null, type: cc.Node },
    scoreLabel: { default: null, type: cc.Label }
}

Physics and collision :

const physics = cc.director.getPhysicsManager();
physics.enabled = true;
physics.gravity = cc.v2(0, -960);
const collision = cc.director.getCollisionManager();
collision.enabled = true;

Rigid bodies can be Dynamic , Static , or Kinematic . Dynamic bodies react to gravity; static bodies do not move; kinematic bodies move only when their position is set manually. Sensors detect collisions without physical response.

Creating fruits as prefabs:

properties: {
    fruitPrefab: { default: null, type: cc.Prefab }
},
start () {
    let fruit = cc.instantiate(this.fruitPrefab);
    fruit.setPosition(cc.v2(0, 400));
    this.node.addChild(fruit);
}

Each fruit script stores an id (type) and an array of cc.SpriteFrame textures. The init(id) method sets the sprite frame according to the id.

cc.Class({
    extends: cc.Component,
    properties: {
        id: 0,
        fruitConfig: { default: [], type: cc.SpriteFrame }
    },
    start () { this.init(1); },
    init (id) {
        this.id = id;
        const sp = this.node.getComponent(cc.Sprite);
        sp.spriteFrame = this.fruitConfig[id];
    }
});

When a fruit is tapped, the script changes its rigid‑body type to Dynamic and applies a circular collider:

jump () {
    this.node.getComponent(cc.RigidBody).type = cc.RigidBodyType.Dynamic;
    const collider = this.node.getComponent(cc.PhysicsCircleCollider);
    collider.radius = this.node.height / 2;
    collider.apply();
}

Collision handling merges two fruits of the same id (except the final watermelon). The onBeginContact callback removes the two colliding fruits, plays a sound, creates the next‑level fruit, updates the score, and spawns a merge animation using dynamically created nodes:

onBeginContact (contact, selfCollider, otherCollider) {
    const s = selfCollider.node.getComponent('fruit');
    const o = otherCollider.node.getComponent('fruit');
    if (s && o && s.id === o.id && s.id !== 10) {
        otherCollider.node.removeFromParent(true);
        selfCollider.node.removeFromParent(true);
        this.node.getComponent(cc.AudioSource).play();
        selfCollider.node.emit('sameContact', {x, y, width, id: o.id});
    }
}

The onSameFruitContact method in game.js creates the next fruit, updates the score, and runs a visual effect defined in a separate juice prefab.

Death detection : A static collider with sensor = true is added to the top line. If a fruit collides with it and remains above after 4 seconds, a death event is emitted and the game ends.

Publishing : Cocos Creator can export to HTML5, Android, iOS, Huawei AppGallery, Google Play Instant, Alipay Mini‑Games, ByteDance Mini‑Games, OPPO, Vivo, Xiaomi, Baidu, and many other platforms. Use Project → Build , select the target, configure the package, and click Build . After the build finishes, click Run to preview the game in a browser.

Conclusion : Cocos Creator offers a visual, component‑based workflow, cross‑platform publishing, and a rich ecosystem, making it an excellent choice for quickly creating simple multi‑device games such as the “Merge Big Watermelon” demo.