
引言
哈喽大家好,我是亿元程序员,上次老板让做拼图游戏的那个小伙伴又来了:
亿哥,我又来了(捂脸),上次我们老板不是让我们趁热抢个拼图游戏头位吗?
结果还是慢了一节,投流基本纯亏,现在大家都在拼题材和变种了(哭笑不得)。
老板却异想天开,让我搞一个
3d版本的(捂脸),我这没有经验咋搞啊!
别慌,3d版本的拼图游戏?那不就是拼模型!其实很早就有小伙伴咨询笔者关于Cocos游戏开发中的动态切割模型!(之前还不知道意欲何为,现在想起大有乾坤。)
言归正传,本期带大家一起来看看,如何在Cocos游戏开发中,实现一个3d版本的拼图(拼模型)游戏,并加入到我的亿元Cocos小游戏实战合集中去。
本文源工程可在文末获取,小伙伴们自行前往。
简单分析一下
3d的拼图游戏其实可以做成拼模型的游戏,就是基本规则沿用拼图游戏的规则:
将完整的图片按照难度分割成
n*n的碎片,然后打乱,玩家通过交换拼图最终把图片恢复完整,包括一些特殊的规则,例如正确相邻的图片会合并成整体。
拼模型游戏就是按照上述规则,将图片替换成模型即可,其关键的第一步就是要把模型动态分割。
那么问题来了,如何将一个模型进行动态分割?
动态模型分割
其实关于动态模型分割,笔者之前的文章就已经做过了介绍,感兴趣的小伙伴可以前往阅读《如何在CocosCreator3.8中实现动态切割模型?》
。
动态模型分割,说是分割,其实是创建,就是动态创建被切割平面分割的两部分子模型,然后把原模型销毁。
其中最关键的API就是utils.MeshUtils.createMesh。这里面涉及的知识点实在是非常多,包括分割、生成、割面填充等等,不要求小伙伴们都会,会用就行,或者会指挥AI用就行。
既然分割起来这么麻烦,有没有更简单的方法?
美术妹子分割
美术妹子 : 我再次谢谢你!(为什么是再次?)
这时候又有小伙伴提出疑问了:
不是说程序能完成的事情,尽量不要麻烦美术妹子吗?
就不怕妹子追你九条街?
其实对于没有3d游戏开发经验的小伙伴来说,美术妹子分割好给到都不一定能完成游戏的开发,更何况通过程序去动态切割!
说到这里,我相信美术妹子会理解的,模型能切割成的份数,很多情况下是可以确定的,所以试试看,说不定能成。
话又说回来,没有3d游戏开发经验的小伙伴,该怎么着手开发拼模型游戏?
创建项目
万事开头难,首先第一步就要创建项目,这里注意要创建一个3d的项目。
区别于2d游戏项目,项目创建后,场景中会自带灯光和相机,以及三维的场景编辑器。
下面列举一些常用的操作:
-
定位物体 :可以通过双击或者快捷键
F,快速定位物体。

-
场景漫游 :按下鼠标右键后,可以通过快捷键
w、s、a、d、e、q漫游场景。

-
调整相机视角 :调整好合适的视角后,选中相机后可以通过菜单栏
节点->将节点对齐到场景视角快速调整相机视角。
-
快速回到相机视角 :选中相机后可以通过菜单栏
节点->将场景视角对齐到与节点快速回到相机视角。
这太基础了,你上你也行,那如何让界面既能显示3d模型又能显示UI?
多相机共存
**如上图所示,**游戏画面中包含UI和模型,意味着场景中可能包含至少2个相机。
控制相机拍摄哪些物体可以通过Visibility属性去控制。
控制相机的渲染优先级可以通过Priority属性去控制,如上面拍背景的相机为0、拍模型的相机为1,拍弹框的相机为2。
说了那么多,可以开始实战写模型游戏,写代码没?
拼模型游戏实战
相信小伙伴们通过上面的文章内容,已经学会如何着手开发拼模型游戏了吧!
由于本期还没有贴熟悉的代码,笔者还是决定补充一些关键代码:
-
屏幕点击3d物体 : 首先通过
screenPointToRay方法将点击转成射线,然后通过PhysicsSystem.instance.raycast获取到对应的物体。
-
拖拽3d物体 :
-
3d物体动画 : 直接用熟悉的
tween动画即可。
效果演示

结语
拼图游戏现在都玩出花了,要不要做个3d版本的试一试?
小伙伴们,你们都学会了吗?
本文实战完整源码已集成到亿元Cocos小游戏实战合集,内含体验链接,通过添加模型即可完成关卡的配置。










