我的《打螺丝闯关》上线啦！想知道怎么做到的吗？

亿元程序员 · 2024年08月28日 00:31

QQ录屏20240828003747

引言

我的《打螺丝闯关》上线啦！

大家好，小伙伴们久等了，距离上次发文，居然已经整整断更快一个月了！

在这过去的一个月里，笔者除了忙于在公司里面救火，还默默地复刻着前阵子比较火打螺丝游戏。

这速度想要蹭热度肯定是赶不上了，主要嘛是为了解决素材饥荒，想弄一个主题介绍Cocos游戏开发从零开发游戏到上线，不知道小伙伴们感不感兴趣呢？

赶紧点击搜索《打螺丝闯关》体验试试吧！欢迎在评论区留下你宝贵的意见哦！

言归正传，本文简单介绍一下Cocos游戏开发如何实现打螺丝游戏的从零到上线，如果对您有帮助，建议点赞分享收藏！

总览

QQ录屏20240828003747

从零到上线

接下来，跟随笔者一起看看复刻一款打螺丝游戏从零到上线需要哪些知识点，具体从零到上线的流程是怎样的？

1.立项

我们先看看立项的定义：

立项是指通过一定的决策程序和组织活动,确定项目的可行性和必要性的过程。

通属地来说就是：

要做什么游戏
为什么要做这样的游戏
这游戏怎么做

关于前面两点，笔者在引言部分已经阐述了，复刻一款打螺丝游戏，解决目前文章素材饥荒情况。

至于这游戏怎么做，下面笔者会给大家细细道来。

2.游戏制作工具

时下能够制作和开发游戏的工具非常多，要写代码和不用写代码的都有。

为了避免读者们选择困难，大家就直接使用Cocos进行开发制作就行，版本的话也不用纠结，直接使用时下最新版的CocosCreator3.8。

当然，具有非常强的领导力的你，也可以带领团队开发与实现你心目中的游戏。

3.美术资源

说到美术，很多小伙伴可能就已经望而止步。美术作为游戏的灵魂之一，起着非常重要的作用。

关于美术资源的获取，笔者能够想到的可能有以下几种：

找一个会美术的贵人，可以一起深入探讨游戏开发。
拿起键盘就自己研究，虽然不一定好看，但是能用。
国内外许多游戏资源网站都有免费开源的，东拼西凑总有好的。
时下热门的AI绘图，虽然环境不一定好弄，但是解决了望而止步的问题。

笔者就有这么个贵人，感谢她。

4.游戏开发框架

游戏开发框架的目的就是节省你的开发时间，让你在游戏开发过程中可以着重考虑游戏功能的实现，不需要纠结如何打开和管理某个界面（UI管理），如何将美术资源加载到游戏中去（资源管理）、如何解决游戏发热卡顿闪退等问题（性能优化）等等。

关于游戏框架的好坏，没有统一的标准，只要你能把游戏制作出来，只要你用的顺心顺手，只要你能够不断迭代，那么它就是适合你的最好的游戏开发框架。

笔者使用的是前面手把手教搭建的Cocos2.x开发框架迭代而来的CocosCreator3.x的开发框架。

5.游戏分析与实现

常规的打螺丝游戏就是通过螺丝将木板固定在墙壁上,我们通过点击螺丝，然后点击其他没有阻挡的孔位，就能将螺丝移动，没有了螺丝固定的木板，会按照物理世界的效果发生旋转或者掉落。

常规打螺丝游戏主要有以下几种游戏对象：

螺丝：它作为打螺丝游戏的核心，首先要实现的功能就是能够点击抬起和放下，然后就是能够对木板进行固定。
螺丝孔：用于插入螺丝，主要提供点击的方法判断被点击和获取。
板：它需要实现的功能就是根据自身的形状判断是否阻挡了螺丝孔，然后就是检测掉落和销毁。
关节连接：其实就是板上的螺丝孔，用于螺丝固定木板时的定位。

首先是我们的螺丝，由于我们使用了引擎自带的物理，需要添加CircleCollider2D组件进行碰撞检测，然后还需要添加RigidBody2D组件使得物理效果生效，需要注意的是，螺丝的主要起到固定的作用，需要把Type设置成Static静态模式。

其中我们自定义的螺丝类，核心方法拔起/点下状态的设置。

以及移动螺丝之后需要移除原关节，并且生成新关节固定新的木板的方法。

紧接着就是我们的螺丝孔，主要添加自定义的螺丝孔类和自定义的螺丝孔编辑类。

螺丝孔类比较简单，主要用于标记螺丝孔，和简单监听一下点击事件。

木板的实现稍微复杂一点，主要包括快速编辑关卡用的编辑器类，以及自定义的木板类。同样需要刚体组件。

其中木板类的核心在于判断木板是否遮挡住了螺丝孔。

其次就是失去了螺丝的固定之后的模板需要检测是否销毁。

6.快速编辑关卡

作为一个不断闯关的游戏，我们需要有快速编辑关卡的能力，于是我们需要许多高效方便的编辑器来协助。简单列举几种：

1.板编辑器

板类编辑器的核心有以下实现：

快速切换板的颜色
快速修改板的孔数
快速翻转、旋转
快速调整板的层级
自动吸附
自动调整板的长度和旋转

简单介绍一下如何通过编辑器快速更改板的颜色。

首先我们通过@property属性显示到编辑器面板。
监听set属性，玩家点击时，对板进一步操作。
核心操作都是通过监听编辑器消息来进行，这块官方文档比较少，需要自行去探索。
例如查询物件的uuid：Editor.Message.request("asset-db", "query-uuid", urlAsset);

再或者动态修改组件的属性。

async set_property<T extends Component>(component: T, nameProperty: string, typeValue: any, value: any) {
    await Editor.Message.request("scene", "set-property", {
        uuid: component.node.uuid,
        path: `__comps__.${component.node.components.lastIndexOf(component)}.${nameProperty}`,
        dump: {
            "type": `cc.${typeValue.name}`,
            "value": {
                "uuid": value.uuid
            }
        }
    });
}

2.孔编辑器

孔编辑器相对比较简单，需要给孔动态插上螺丝，或者修改孔为锁上状态。

其中的关键是能够动态地克隆编辑器里assets目录下的物件,例如动态克隆螺丝钉

用到的编辑器消息的主要方法如下：

async instantiate(urlPrefab: string, parent: Node) {
    let uuidPfb = await this.query_uuid(urlPrefab);
    let uuid = await Editor.Message.request("scene", "create-node", {
        parent: parent.uuid,
        assetUuid: uuidPfb
    });
    return cce.Node.query(uuid);
}