羊了个羊3D版，迄今我见过还原度最佳游戏！还支持微信授权和教程视频

晓衡的成长日记

已于 2022-10-09 06:14:16 修改

阅读量2.7k

点赞数

文章标签：游戏编程语言 Cocos Creator 小游戏游戏源码

于 2022-10-07 23:58:53 首次发布

原文链接：https://mp.weixin.qq.com/s?__biz=MzA5MjEwOTI4Ng==&mid=2247535170&idx=1&sn=8625c371a476355dbcf4dc3a1f31026b&chksm=90702acba707a3dd0d83e87779cdd677308b62c90017fd0525d0784d2850e1d7138106ffbcdb&scene=126&&sessionid=0

版权

因为过不了《羊了个羊》第2关，有一位开发者很是生气。说的是解决不了问题，就解决提出问题的人！

直接自己做一个《羊了个羊》而且还要是个3D的，这就是今天要介绍的一位开发者：花叔。

游戏开发，技术变现，我们不是说起耍的！《驴了又驴》在国庆期间为 Cocos 社区和 Cocos Store 带来不少的惊喜！

花叔非常的豪情，上架微信小游戏的同时，将游戏源码也上架到 Cocos Store。国庆7天，花叔估计就腾了7个晚上，一是因为网页版 iOS 卡顿问题，花叔不眠不休地搞了两天。二是问题解决后，花叔还为支持的老铁们，录制有详细的源码解读视频与图文教程，授之予鱼的同时，还希望能授之予渔！

下面我们来看看花叔的创作过程与心得吧！

国庆这么长的假期，按惯例，我总会输出点啥。对的，又搞了个3D游戏，名字叫“驴了又驴”。之前也发过视频和朋友圈了，这回写篇文章记录一下。

创作背景

之前有一段时间在研究 Unity，对于 Cocos Creator 太久没碰，于是想趁机复习一下，而正愁以什么逻辑或案例来复习时，羊了个羊小游戏爆火了，那好，就拿它练手。

以往个人用的都是 Cocos Creator 的2d 版本，里面也有 3D 功能，但比较弱。

这次是第一次直接用 3D 版来完整做一个游戏，完全没有复用以往的代码，所以这游戏也算是我的第一款 Cocos Creator 3D 游戏了，做了个简单的宣发视频，最终游戏是这样的：

整个游戏开发的经历路程，我也录了个视频（关上房间门在iMac前自言自语录音，感觉真奇怪），视频有点长哦，建议可以先看看文章，感兴趣再回来看视频：

游戏介绍

还是用生冷的文字介绍下游戏吧。

上架情况

国庆前字节小游戏也审核得比较勤快，所以这个游戏首发是在字节，但因为软著的问题，所以名字改成“消除达人”，同时由于国庆期间字节没人审核，所以上的版本比较低，性能也一般，可以上抖音搜索游戏名字进行体验。

后来是上架的微信版，名字叫“驴了又驴”，因为国庆期间微信小游戏也审核，所以微信版的版本最新，性能也很好，正式版传送门在这里：

玩法介绍

关于玩法，是复刻羊了个羊的消除玩法，但原版羊了个羊是个2d版，我开发的这个是个3d版，所以层叠表现更真实，配合光照，实现的是物理层叠效果。

与此同时，对于管理员，游戏还有个关卡编辑或自动随机生成模式，以便于快速制作关卡。

ps. 随机出来的关卡都能过关哦~

素材组成

除了棋子贴图上的图片素材是一套2d的水果图标，其他元素直接用的纯色的颜色，而 3D 模型素材分两种，桌子和棋子以及木制托盘是我用 blender 抹出来的：

而里面的人物和驴模型，是我从商店买的 FBX 导进来的：

源码开放

这次跟以往不一样，这次源码直接公开在 Cocos 商店了，定价是一个白菜价，却是一份很完整的游戏源码，点击本文最后的“阅读原文”可以前往商店地址：

https://store.cocos.com/app/detail/4120

由于游戏逻辑比较简单，因为没做排行榜等需要远端排序和存储的功能，所以并不涉猎到服务器开发部分，这样也给代码的部署带来了便利，只要拿到 Cocos Creator 3D 项目的代码，就可以直接编译上架到不同的平台去，开箱即用了。

需要提醒下，如果你对本源码感兴趣，可以购买学习或改造成自己的游戏，但建议不要转售。做源码也花精力，求理解。

研发流程和技术

流程概况

因为属于独立游戏，本游戏的开发流程比较简单：「首先简单策划，然后主素材（棋子建模和实例化）创作，之后主程序 demo 制作，最后润色和上架」，这里就不每步一一阐述了。

blender的使用

因为自己是第一次学 blender 去建模并应用到游戏开发中，所以有几点可以提一下：

blender 非常轻量和好用，导出 Cocos Creator 3D 能用的 FBX 也比较简单，注意下空间方向转换的参数即可。

但是要记住很多快捷键，如果是简单的建模，以下一些常用的快捷键会经常用到，比如用移动的G，用于变形S，用于挤出面的E

用于内插面的I

还有些比较好用的功能，比如要实现倒角，那么有两种方式，

1. 用修改器

2. 直接边倒角编辑

其他的一些基本功能也要学学，最快的学习方式可能是去B站看教学视频，我是看了一些基础视频教程才开始操作的。

Cocos Creator 3D 里一些我想要提的点

在把这个游戏的主功能做完后，我面对一个性能问题一直没法解决。

经过 UV 合并、合批、对象池等一些手段后，把 drawcall 从400多优化到60多，但对于大部分苹果手机从微信浏览器访问依然卡得不行，当时用的3.6.0版本，后来升级到最新版 Cocos Creator 3.6.1 后，竟然自己就解决了......

所以啊，在 Cocos 官方目前对 3D 版迭代这么频繁的情况下，建议大伙紧跟步伐，更新到最新版，以防出现“系统性卡bug”。

由于我有两三年 2D 版 IDE 的开发经验，3D 版对我来说其实很好上手，基本上很多功能都顺手拈来，没多久就搞懂了，唯独跟材质或 shader 相关的，我要花不少时间去研究，看来需要找个时间恶补一下。

商业化行为兼容

行为简要分析

这个游戏的商业化行为不太多，无非就是道具上的使用，游戏有三个道具以及复活。

这些都是激励行为，做视频或分享回调的激励机制即可。

视频广告兼容（字节、微信）

对于这些道具，目前在字节和微信上实现的回调逻辑不大一样，字节版中已经封装好视频广告的回调（理论上也是兼容微信的）

更改视频广告id后，直接在相应的地方调用即可：

延迟分享裂变逻辑（微信）

在微信版上，可能我们一开始并不需要急着商业变现，这时候我们可能更需要利用微信生态去实现裂变爆量，会想到分享回调，实现的逻辑是用户分享即可获得某个道具使用权限。

以往官方 API 有明确回调事件时实现起来比较简单，但早就废弃了，现在要实现只能用折中的方法，主流的做法是延迟分享。

什么意思呢？就是在调起微信分享框后开始计时，如果超过一定时间，那么就算用户已经分享了。具体代码实现可以是这样：

regWxShareEvent(cb) {
    if (typeof wx != 'undefined') {
      wx.shareAppMessage({
        imageUrl: 'https://cdn.wxnodes.cn/lv/share.jpg',
      })
      wx.tmpAct = act
      wx.tmpTime = Date.parse(new Date().toString())
    }
    var self = this
    function act() {
      if (typeof wx != 'undefined') {
        if (Date.parse(new Date().toString()) - wx.tmpTime < 2000) {
          wx.tmpAct = null
          return
        }
      }
      setTimeout(() => {
        if (cb) cb()
      }, 200)
    }
  }

定义一个注册方法，里面会拉起微信分享，然后会把自定义传递过去的方法参数缓存起来。然后在微信小游戏 onshow 的时候进行时间和回调方法判断:

if (typeof wx != 'undefined') {
      wx.onShow(() => {
        if (wx.tmpAct) wx.tmpAct()
      })
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline'],
      })
    }

这样就能实现这样的效果：