我的第一款cocos creator 3d游戏 - 羊了个羊3d版

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

创作背景

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

以往个人用的都是cocos creator的2d版本，里面也有3d功能，但比较弱。这次是第一次直接用3d版来完整做一个游戏，完全没有复用以往的代码，所以这游戏也算是我的第一款cocos creator 3d游戏了，做了个简单的宣发视频，最终游戏是这样的：

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

游戏介绍

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

• 上架情况 国庆前字节小游戏也审核得比较勤快，所以这个游戏首发是在字节，但因为软著的问题，所以名字改成“消除达人”，同时由于国庆期间字节没人审核，所以上的版本比较低，性能也一般，正式版体验码在这里：

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

• 玩法介绍

关于玩法，是复刻羊了个羊的消除玩法，但原版羊了个羊是个2d版，我开发的这个是个3d版，所以层叠表现更真实，配合光照，实现的是物理层叠效果。 与此同时，对于管理员，游戏还有个关卡编辑或自动随机生成模式，以便于快速制作关卡。 ps.随机出来的关卡都能过关哦~

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

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

源码开放

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

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

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

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

研发流程和技术

• 流程概况 因为属于独立游戏，本游戏的开发流程比较简单：「首先简单策划，然后主素材（棋子建模和实例化）创作，之后主程序demo制作，最后润色和上架」，这里就不每步一一阐述了。
• blender的使用 因为自己是第一次学blender去建模并应用到游戏开发中，所以有几点可以提一下：
  • blender非常轻量和好用，导出cocos creator3d能用的fbx也比较简单，注意下空间方向转换的参数即可。

  

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

  

  用于内插面的I

  

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

  

  2.直接边倒角编辑

  

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

• cocos creator 3d里一些我想要提的点
  • 在把这个游戏的主功能做完后，我面对一个性能问题一直没法解决。

  

  经过uv合并、合批、对象池等一些手段后，把drawcall从400多优化到60多，但对于大部分苹果手机从微信浏览器访问依然卡得不行，当时用的3.6.0版本，后来升级到最新版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'],      })    }

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

原版羊了个羊的做法也是一样的逻辑。

后续

开发游戏还是会带来愉悦，我也乐此不疲。

但最近越发觉得我对一些基础知识系统学习的时间缺乏会导致自我怀疑，会怀疑能不能做好一个游戏。

撇开程序，比如对图形学、美术、建模等相关知识的学习，这些好像是稍微学一下就能配合程序做出一个像样的游戏，但实际上，这样做出来的作品往往很难经得起推敲，要做成精品，还是需要面面俱到，每个环节都要有一定造诣。

任重道远，看来还是需要找个时间专门攻克下特定专项啊。