Creating a Simple Plane Shooter Game with Cocos Creator 3.x

Cocos is a cross‑platform game engine that offers rendering, physics, UI, and animation tools. The article begins with an overview of Cocos, Cocos2d‑x, Cocos2d‑js, Cocos Creator 2.x and 3.x, and recommends beginners start with Cocos Creator 3.x.

Basic concepts are introduced: a Scene is the game stage, the Director controls flow, Node represents game objects, Prefab stores reusable node configurations, Component adds behavior, Asset holds resources, and the built‑in editor manages all of these.

Background scrolling is achieved by placing two identical images under a Canvas Node and moving them downward each frame. When an image moves off‑screen its position is reset to the top, creating a seamless loop.

export class BgControl extends Component {
  start() {}
  update(deltaTime: number) {
    for (let item of this.node.children) {
      const { x, y } = item.getPosition();
      const moveY = y - 100 * deltaTime;
      item.setPosition(x, moveY);
      if (moveY < -870) {
        item.setPosition(x, moveY + 852 * 2);
      }
    }
  }
}

Player control uses Node.EventType.TOUCH_MOVE (or MOUSE_MOVE ) to follow the cursor. The touch location is obtained with e.getUILocation() and applied via node.setWorldPosition(v3(x, y)) .

export class PlayerControl extends Component {
  start() {
    this.node.on(Node.EventType.TOUCH_MOVE, (e: EventTouch) => {
      const { x, y } = e.getUILocation();
      this.node.setWorldPosition(v3(x, y));
    });
  }
  update(deltaTime: number) {}
}

Bullet creation is handled by a BulletControl component that moves the bullet upward each frame and destroys it when it leaves the screen.

export class BulletControl extends Component {
  update(deltaTime: number) {
    const { x, y } = this.node.getPosition();
    this.node.setPosition(x, y + 600 * deltaTime);
  }
}

Enemy spawning uses a prefab instantiated at random x positions. An EnemyControl component moves the enemy downward and destroys it when it exits the view.

export class EnemyControl extends Component {
  update(deltaTime: number) {
    const { x, y } = this.node.getPosition();
    const moveY = y - 600 * deltaTime;
    this.node.setPosition(x, moveY);
    if (moveY < -900) this.node.destroy();
  }
}

Collision detection is set up with 2D physics. Both bullets and enemies receive a RigidBody2D (type Kinematic ) and a BoxCollider2D . The global physics system registers a BEGIN_CONTACT callback in BgControl to detect collisions, check collider tags (0 for bullet, 1 for enemy), and call die() on both objects.

onBeginContact(self: Collider2D, other: Collider2D) {
  if (other.tag === 1 && self.tag === 0) {
    other.getComponent(EnemyControl).die();
    self.getComponent(BulletControl).die();
  } else if (other.tag === 0 && self.tag === 1) {
    other.getComponent(BulletControl).die();
    self.getComponent(EnemyControl).die();
  }
}

Death animation loads a sequence of sprite frames from assets/resources/enemy-death using resources.loadDir , then swaps the sprite frame every 80 ms. After the animation finishes, the enemy node is destroyed.

loadImages() {
  resources.loadDir("enemy-death", SpriteFrame, (_err, frames) => {
    this.airplaneDeadImages = frames;
  });
}
playDead() {
  for (let i = 0; i < this.airplaneDeadImages.length; i++) {
    setTimeout(() => {
      if (this.node.getComponent) {
        this.node.getComponent(Sprite).spriteFrame = this.airplaneDeadImages[i];
      }
    }, i * 80);
  }
}

The final step is to build the project for Web Mobile via the Cocos Creator UI.

In summary, the guide provides a complete end‑to‑end example of creating a simple 2D plane‑shooting game with Cocos Creator 3.x, covering engine basics, scripting with TypeScript, resource management, physics‑based collision, animation, and deployment.