cocos creator制作2dTop-down游戏（虚拟摇杆、地图加载）

《不被遗忘的时光》第一期

1、游戏的形式：横板；2d的顶视角（Top-down）；射击；ARPG；益智解谜。

2、画风：类似手游《伊洛纳》。

3、故事背景：以中元节的爷孙阴阳交流作为故事背景，参考《寻梦环游记》。以孙子的视角探寻爷爷年轻（1960s-1970s）年代的故事。

4、游戏引擎：cocos creator v3.8+

5、场景和相机：游戏场景主要两个：

（1）大厅（界面游戏和线索），只需要一个固定相机。

（2）游戏内的主场景，需要一个ui的固定相机，以及一个跟随主人公的相机。

下面是游戏内场景暂时的实现方案：

a.scene下两个画布：Canvas和UICanvas，UI层级更高，因为控制和信息的组件都在UI层。

b.项目设置为高度适配模式，然后两个画布分别加上widget组件，都选择宽度拉伸。

如果对适配感兴趣的，可以参考一下cocos creator 的适配用法。

c.两个画布分别挂上相机，而相机的可视层需要做区别，需要让UICanvas的相机拍不到Canvas的内容，反之亦然即可。

d.Canvas的相机需要跟随移动，但为了性能的考虑，这里使用的是延时检测加相机缓动的形式。在主人公移动时，通过时间间隔校验，当移动时间超过一定的阈值，则发送事件，让监听的相机做出移动跟随。

//主人公移动检测
if (this.m_iMoveInterval < 0){
    this.m_iMoveInterval = D.REFRESH_CAMERA_TIME;
    EventManager.getInstance().emit(D.DefineEvent.EVENT_PLAYER_MOVE);
}

//相机跟随的监听方法
private onPlayerMove(){
 	if (this._playerPrefab.getComponent("hero").judgePlayerIsMove() && 		  		this.m_mainCamera)
    {
       this.changeCameraPosition();
    }
}

这里我设置的REFRESH_CAMERA_TIME是1s，可以根据实际情况做调整。

注意：当主人公移动完成后，需要再发一个事件让相机移动到正确的位置，防止主人公的移动过程不足REFRESH_CAMERA_TIME。

案例演示效果：

6、控制方式：方向的控制用虚拟摇杆，攻击及其他功能的控制还没做。

（1）虚拟摇杆的实现方式，这里是使用了这位大佬的代码：虚拟摇杆，再加上了一点小修改，主要是加入了速度控制，以下是添加了速度控制的代码：

 private _onTouchEventMove(event: EventTouch) {
        let curTouchPos = event.touch.getUILocation();
        let uiWorldPos = new Vec3(curTouchPos.x, curTouchPos.y, 0);
        let convertNodePos = this.node.getComponent(UITransform).convertToNodeSpaceAR(uiWorldPos);
        //触摸起始点世界坐标
        let originLocation = this.node.getWorldPosition();
        let startLocation:Vec2 = v2(originLocation.x, originLocation.y);
        //触摸点和大圆距离 (大圆坐标 = 触摸起始点坐标)
        let dist = Vec2.distance(curTouchPos, startLocation);
        let radian = Math.atan2(curTouchPos.y - startLocation.y, curTouchPos.x - startLocation.x);//触摸点和大圆夹角弧度

        //触摸点在大圆范围内，则小圆位置移动到当前触摸点
        let dirPos = convertNodePos;
        if (dist <= this.maxMoveRadius) {
            //触摸点在圆环范围外，如果小圆移动到当前触摸点就会跑出大圆了，所以小圆位置移动到大圆边缘
            if (isValid(this.imgSmallCircleSpNode)) {
                this.imgSmallCircleSpNode.setPosition(convertNodePos);
            }
        } else {
            let posX = Math.cos(radian) * this.maxMoveRadius;
            let posY = Math.sin(radian) * this.maxMoveRadius;
            dirPos = new Vec3(posX, posY, 0);
            if (isValid(this.imgSmallCircleSpNode)) {
                this.imgSmallCircleSpNode.setPosition(posX, posY);
            }
        }

        let slidingScale = dist / this.maxMoveRadius;
        slidingScale = slidingScale > 1 ? 1 : slidingScale;
        this._vcMoveData.slidingScale = slidingScale;

        this._vcMoveData.distance.x = dirPos.x / dist;
        this._vcMoveData.distance.y = dirPos.y / dist;

        let newAngle = radian * 180 / Math.PI;
        this._vcMoveData.angle = newAngle;
        let vcMoveData = this._vcMoveData.cloneSelf();
        //派发移动事件
        //this.node.emit(UIVCEvent.UIVC_Move, vcMoveData);
        EventManager.getInstance().emit(UIVCEvent.UIVC_Move, vcMoveData);
    }

如果对cocos creator 的触摸相关感兴趣的，可以跳转

7、地图加载

（1）地图做出无边界的形式动态的循环加载；我将地图分割为256*256像素的单元，动态的进行加载。

（2）将植物，建筑等作为预制体，带上碰撞盒和刚体，然后每个地图上放上需要的预制体。以下是示例：

注意，Top-down的2d游戏需要将重力加速度设为0：

cc.PhysicsSystem2D.instance.gravity = cc.v2(0, 0);

（3）碰撞关系可以直接在project setting的物理中设置：

（4）动态加载和刷新的代码会在第一章结束时上传到github和gitee上，这里暂时不做介绍。

（5）示例演示：

打开调试模式：

关闭调试模式：

8、美术风格上：2d像素风顶视角(Top-down)，画风上参考《伊洛纳》。

由于我们现在只有程序，非常需要感兴趣的会画画、会spine动效的朋友们来一起来合作。

联系方式：rogerorion@163.com。