查看原文
其他

源码下载丨爆款频出的三消游戏,还能玩出什么花样?

花叔 COCOS 2023-03-16

引言:本文作者花叔,是一名资深 UI 工程师,同时也是游戏开发狂热爱好者。本次是他第一次用 v3.x 完整开发一个 3D 游戏。源码及开发视频见文末。

以往我都是用 Cocos 做 2D 游戏,这次是第一次直接用 Cocos Creator 3.x 来完整做一个游戏,完全没有复用以前的代码。

游戏现在在微信小程序上即可体验(),源码上传至 Cocos Store,开发历程我也录了个视频发布在 B 站,建议可以先看看文章,感兴趣再去看视频。本次分享希望这些分享能对大家有所帮助!


游戏介绍


游戏玩法为经典三消玩法,但不同于一般的 2D 画面,这次我开发的是一个 3D 版,所以层叠表现更真实,配合光照,实现的是物理层叠效果。


与此同时,对于管理员,游戏还有个关卡编辑或自动随机生成模式,以便于快速制作关卡(PS. 随机出来的关卡都能过关哦~)。

素材部分,除了棋子贴图上的图片素材是一套 2D 的水果图标,其他元素直接用的纯色的颜色。而 3D 模型素材分两种,人物和驴模型是我从网上买的 FBX 素材导进来的,桌子、棋子以及木制托盘是我用 blender 抹出来的。



研发流程


本意是为了练手,游戏的开发流程比较简单:策划、素材制作(棋子建模和实例化)、主程序 Demo 制作、润色和上架,这里就不每一步一一阐述了。


blender 的使用


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


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



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



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


1、用修改器:



2、直接边倒角编辑:



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


由于我之前有两三年 Cocos 使用经验,这次使用 v3.x 觉得其实很好上手,基本上很多功能都顺手拈来,唯独跟材质或 shader 相关的,花了不少时间去研究,看来需要找个时间恶补一下。此外,在目前 Cocos 官方对 3.x 版本迭代这么频繁的情况下,建议大伙可以考虑紧跟步伐更新版本,以防出现「系统性卡 bug」。


商业化行为兼容


这个游戏的商业化行为不太多,无非就是道具的使用。游戏有三个道具以及复活,这些都是激励行为,做视频或分享回调的激励机制即可。



视频广告兼容(字节、微信)


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



更改视频广告 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'],
      })
    }


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



资源链接


  • 点击文末【阅读原文】下载源码

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


  • 开发视频

https://www.bilibili.com/video/BV1eD4y117H4/


最后再碎碎念两句。开发游戏还是会带来愉悦,我也乐此不疲。但最近越发觉得我对一些基础知识系统学习的时间缺乏会导致自我怀疑,会怀疑能不能做好一个游戏。


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


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

*本文转载自花叔个人公众号「MinProgram」,欢迎关注和与作者交流!


往期精彩

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存