用 Cocos Creator 制作平台跳跃游戏

前言

平台跳跃类游戏如《超级马里奥》《Celeste蔚蓝》等，非常考验玩家的操作和判断，有着非常本真的游戏乐趣。这类游戏乍一看，挺容易做的，但是要做好却不太容易。今天，我将使用 Cocos Creator v2.1.2 演示如何灵活快速地使用 Cocos Creator 来制作这类经典的横版平台跳跃类游戏，主要目的是帮助大家熟悉组件的用法，横版游戏实现方法很多，这里不做讨论！

 

开始游戏制作

 

游戏效果预览

美术资源来自互联网

 

游戏场景设计

参考《超级玛丽》的世界观，我们先在[节点管理器]构建我们的世界节点树，我们添加了摄像机，游戏背景层，世界根节点，地图节点，角色节点。

 

1.添加摄像机(Main Camera)

摄像机作为玩家观察游戏世界的窗口，Cocos Creator 默认会自动为场景分配一个[摄像机]，我们无需手动添加。

 

2.添加世界根节点(World Root)

添加一个空节点，用于放置游戏内的物体节点。

（1）创建脚本 world.ts 并拖入节点属性面板，用于配置游戏世界参数，比如设置重力加速度 G 的值。

（2）创建脚本 lookat.ts 并拖入节点属性面板，根据 Player 节点的位置同步世界视角。

全局配置 world.ts 代码：

const {ccclass, property} = cc._decorator;​@ccclassexport default class CWorld extends cc.Component {
  ​    @property()    WorldFallG: number = 0;​    @property()     WorldWalkA: number = 0;​    static G: number = 0;        static WalkA: number = 0;         // LIFE-CYCLE CALLBACKS:​    onLoad () {
          CWorld.G = this.WorldFallG;            CWorld.WalkA = this.WorldWalkA;     }​    start () {
          // enable Collision System        cc.director.getCollisionManager().enabled = true;        cc.director.getCollisionManager().enabledDebugDraw = true;        cc.director.getCollisionManager().enabledDrawBoundingBox = true;    }​    // update (dt) {}}

世界视角控制 lookat.ts 代码：

const { ccclass, property } = cc._decorator;​@ccclassexport default class NewClass extends cc.Component {
  ​    @property(cc.Node)    target: cc.Node = null;​    @property(cc.Node)    map: cc.Node = null;​    boundingBox: cc.Rect = null;    screenMiddle: cc.Vec2 = null;​    minX: number = 0;    maxX: number = 0;    minY: number = 0;    maxY: number = 0;​    isRun: boolean = true;​    // LIFE-CYCLE CALLBACKS:​    onLoad() {
          this.boundingBox = new cc.Rect(0, 0, this.map.width, this.map.height);        let winsize = cc.winSize;        this.screenMiddle = new cc.Vec2(winsize.width / 2, winsize.height / 2);        this.minX = -(this.boundingBox.xMax - winsize.width);        this.maxX = this.boundingBox.xMin;        this.minY = -(this.boundingBox.yMax - winsize.height);        this.maxY = this.boundingBox.yMin;    }​    update() {
          if (!this.isRun)             return;                    let pos = this.node.convertToWorldSpaceAR(cc.Vec2.ZERO);        let targertPos = this.target.convertToWorldSpaceAR(cc.Vec2.ZERO);        let dis = pos.sub(targertPos);        let dest = this.screenMiddle.add(dis);        dest.x = cc.misc.clampf(dest.x, this.minX, this.maxX);        dest.y = this.minY;        this.node.position = this.node.parent.convertToNodeSpaceAR(dest);    }}

 

3.添加角色(Player)

我们控制的游戏主角节点，作为游戏世界视角的焦点。

 

4.添加地图(Tiled Map)

将