CocosCreator物理小游戏实战-别离开碗（三）

摘要

时间过的真快，阔阔工作之余录制的物理小游戏视频教程也已经更新到了 14 集！可能这就是对技术的热爱吧！本文就对教程做下阶段性的总结！

正文

使用版本

CocosCreator 版本 2.3.4

视频链接为：https://www.bilibili.com/video/BV1ck4y167mR

按钮动作&工具类 Util（第 5 集）

按钮的动作我没有使用按钮组件，而是使用了节点事件监听；使用解构简化事件类型的书写：

const { TOUCH_START, TOUCH_END, TOUCH_CANCEL } = cc.Node.EventType

this.startButton.on(TOUCH_START, () => {
    // 改变按钮节点的 scale
}, this)

//...

改变节点的动作可以封装到一个工具类里：

export class Util {

    static clickDownTween(node: cc.Node | undefined) {
        if (!node) { return }
        cc.tween(node).to(0.1, { scale: 0.9 }).start()
    }

    static clickUpTween(node: cc.Node | undefined) {
        if (!node) { return }
        cc.tween(node).to(0.1, { scale: 1 }).start()
    }
}

优化后的代码：

this.startButton.on(TOUCH_START, () => {
    Util.clickDownTween(this.startButton)
}, this)

动作后回调（第 6 集）

触摸开始是让节点缩放，松手是放大回正常尺寸，但是如果不等动作完成后触发事件，会出现事件触发时，按钮还在进行放大的现象。理应在动作结束后进行事件的触发，对 Util.clickUpTween() 进行改造：

static clickUpTween(node: cc.Node | undefined, callback?: () => void) {
    if (!node) { return }
    cc.tween(node).to(0.1, { scale: 1 }).call(() => {
        callback && callback()
    }).start()
}

使用：

this.startButton.on(TOUCH_END, () => {
    Util.clickUpTween(this.startButton, () => {
        uiManager.gameStart()
    })
}, this)

uiMap 与枚举（第 7 集）

我们有 6 个 UI 要进行管理，每个 UI 都应该有显示与隐藏的方法，故抽出其共有属性与方法，实现一个 UIBase，让 6 个 UI 脚本去继承 UIBase，然后要对于实例化后的进行管理，采用了一个 map 数据结构：

private uiMap = new Map<UIType, UIBase>()

UIType 是为了方便使用的枚举：

export enum UIType {
    ControlPanel,
    LevelInfo,
    LevelSelect,
    StartMenu,
    WinPanel,
    LossPanel
}

关卡选择界面与逻辑（第 8-9 集）

关卡选择界面主要涉及一个列表，我这里距离了六关，也可以多放些使用 Scrollview 做成滚动的。如何识别每个关卡按钮，可以使用下标的形式，在创建时就按照顺序，这样从上到下就是对于 node.children 这个数组的下标：

button.on(TOUCH_END, () => {
    Util.clickUpTween(button, () => {
        // 从 1 开始
        const level = index + 1
        // 传入参数
        uiManager.gameStart(level)
    })
}, this)

轮盘限位相似三角形原理（第 10 集）

轮盘这里注意两点，一个是触摸事件放在背景上，区域大点，方便定位；一个是限位处理，设置一个半径，如果手指触点到中心位置距离大于半径，根据相似原理乘以这个比例的倒数就会回到半径这个长度，然后把 x 和 y 乘以这个比率就是位置：

limitMidNodePos(pos: cc.Vec2): cc.Vec2 {
    const R = 130
    // 取当前位置长度，（x，y）=>len
    const len = pos.mag()
    // 计算 len 与 R 的关系，是内部还是外部，在外部，利用比例，限制回区域
    const ratio = len > R ? R / len : 1
    return cc.v2(pos.x * ratio, pos.y * ratio)
}

食物刚体旋转位移控制逻辑（第 11-13 集）

为了逻辑清晰，所有 UI 由 UIManager 管理，然后由其负责与 GameManager 通讯：

简单封装物理模块（第 14 集）

对于物理模块，封装这么五个方法：openPhysicsSystem() closePhysicsSystem() setRigidBodyStatic() setRigidBodyDynamic() setRigidBodyLinearVelocity() 顾名思义，分别是：开启物理系统、关闭物理系统、设置一个节点上的刚体类型为静态、设置一个节点上的刚体类型为动态、设置一个节点上的刚体线速度，以下为具体实现，都是比较简单的封装：

export class PhysicsManager {

    static openPhysicsSystem() {
        cc.director.getPhysicsManager().enabled = true
    }

    static closePhysicsSystem() {
        cc.director.getPhysicsManager().enabled = false
    }

    static setRigidBodyStatic(node: cc.Node) {
        const body = node.getComponent(cc.RigidBody)
        body.type = cc.RigidBodyType.Static
    }

    static setRigidBodyDynamic(node: cc.Node) {
        const body = node.getComponent(cc.RigidBody)
        body.type = cc.RigidBodyType.Dynamic
    }

    static setRigidBodyLinearVelocity(node: cc.Node, v: cc.Vec2) {
        const body = node.getComponent(cc.RigidBody)
        body.linearVelocity = v
    }
}

结语

KUOKUO 会坚持更新视频哦，哔哩哔哩求关注，视频链接为：https://www.bilibili.com/video/BV1ck4y167mR

2020！我们一起进步！O(∩_∩)O~~

微信公众号