益智3D小游戏技术分享,立方体数字 Cube Digits,Cocos Creator 3.7.1
白玉无冰
共 3318字,需浏览 7分钟
·
2023-04-07 06:01
最近开发了一款益智3D小游戏,分享其中的一些技术实现~
![84a5b695be2e290f3c9a0ca0d1aeca72.webp](https://filescdn.proginn.com/d5ecb2eac485858951b4df3c3a732eaa/84a5b695be2e290f3c9a0ca0d1aeca72.webp)
视频
可以参考实现效果与技术讲解的视频[1],介绍了如何创建获取项目[2],编辑关卡,以及一些技术实现。
玩法
当你滚动你的立方体时,你会遇到其他带有数字的立方体,你可以加、减或乘以匹配最终立方体上的数字。
![55a59257ca897dec62105cc33bc8dff0.webp](https://filescdn.proginn.com/3452a1ee464c2c7bc7da5c77362033ec/55a59257ca897dec62105cc33bc8dff0.webp)
体验
可直接进入微信小游戏【 不停歇的球】体验~
环境- 引擎版本:Cocos Creator 3.7.1
- 编程语言:TypeScript
关卡编辑
采用预制体的方式设计关卡。
![f359e721ae98143fcedbcd12506b2bc4.webp](https://filescdn.proginn.com/c48c21c0c4a8d8356fd63b602436a24c/f359e721ae98143fcedbcd12506b2bc4.webp)
每个方块都会挂载一个辅助脚本,控制方块的类型,数值等显示
![16ea774fe39d01d5cf171673a0756d9a.webp](https://filescdn.proginn.com/38dc151d9b439f6a8bb0d44f6379828b/16ea774fe39d01d5cf171673a0756d9a.webp)
每个关卡里设计了不同的方块类型。
![ecfc99a1914104ff15f591717c8e9959.webp](https://filescdn.proginn.com/2bd857fb52146e937131086bd2ac5525/ecfc99a1914104ff15f591717c8e9959.webp)
以及不同的计算方式
![f994ac934092b4f7a9c4cf0306604045.webp](https://filescdn.proginn.com/e069ab8d8e38a3bd80d2bf4f0594450a/f994ac934092b4f7a9c4cf0306604045.webp)
assets\src\Level.ts
遍历两次所有方块节点,根据位置关系记录节点上下左右节点。
const cubes = this.getComponentsInChildren(Cube)
for (let index = 0; index < cubes.length; index++) {
const element = cubes[index];
const pos = element.node.position
for (let index2 = 0; index2 < cubes.length; index2++) {
const element2 = cubes[index2];
if (element == element2) continue
const pos2 = element2.node.position;
if (pos.x == pos2.x) {
if (pos.z == pos2.z + C_CUBE_RADIUS) {
element.up = element2
element2.down = element
} else if (pos.z == pos2.z - C_CUBE_RADIUS) {
element.down = element2
element2.up = element
}
} else if (pos.z == pos2.z) {
if (pos.x == pos2.x + C_CUBE_RADIUS) {
element.left = element2
element2.right = element
} else if (pos.x == pos2.x - C_CUBE_RADIUS) {
element.right = element2
element2.left = element
}
}
}
}
3D文本
方法1
-
使用
Label
组件 -
添加
RenderRoot2D
组件 -
添加深度测试开启的材质 (
builtin-sprite
)
![cc8885516ca19f337bccefd85a815d56.webp](https://filescdn.proginn.com/5d6afec235639aaa4dda2246909e66c3/cc8885516ca19f337bccefd85a815d56.webp)
方法2
- 添加无光照的材质,选择透明
-
使用
Label
的纹理
const tex = this.lb.spriteFrame.texture
this.meshLabel.sharedMaterial.setProperty("mainTexture", tex)
![ace15d158563d43f875be62143285084.webp](https://filescdn.proginn.com/4b85f84b1c4e4d20bc24bd9ec00431df/ace15d158563d43f875be62143285084.webp)
方法3
可参考3DUI in Cocos Creator,但是此项目没使用这个方法😄
![35a8e782b95060114da6b3fd0b469e69.webp](https://filescdn.proginn.com/7d9a6204097641704061464e97860e8a/35a8e782b95060114da6b3fd0b469e69.webp)
立方体滚动
![1e71ebcb302eb354930958d281d6b8aa.webp](https://filescdn.proginn.com/a00379257c9c6cf0c1b2e6cd2c6650ec/1e71ebcb302eb354930958d281d6b8aa.webp)
实现思路类似2DUI中的锚点,人为添加一个辅助节点作为滚动方块的锚点。
- 将立方体添加到一个辅助节点
- 旋转辅助节点
- 旋转前后要缓存原来节点数据,在变化前后还原节点数据
核心代码如下
private afterRotate() {
const oldw = this.node.worldPosition.clone()
const oldr = this.node.worldRotation.clone()
this.rotateHelper.parent.addChild(this.node)
this.node.worldPosition = oldw
this.node.worldRotation = oldr
this.rotateHelper.setRotationFromEuler(Vec3.ZERO)
}
private rotate(offset: Vec3, eulerAngles: Vec3) {
const oldw = this.node.worldPosition.clone()
Vec3.add(this.rotateHelper.worldPosition, this.node.worldPosition, offset)
this.rotateHelper.worldPosition = this.rotateHelper.worldPosition
this.rotateHelper.addChild(this.node)
this.node.worldPosition = oldw
tween(this.rotateHelper).to(0.3, { eulerAngles: eulerAngles }, {
onComplete: () => {
this.afterRotate()
}
}).start()
}
结语
阅读原文可直接获取项目,有任何问题可在Cocos 论坛[3]中或在微信公众号中留言~
参考资料
[1]实现效果与技术讲解的视频: https://www.bilibili.com/video/BV1mM411u7W3
[2]创建获取项目: https://store.cocos.com/app/detail/4721
[3]Cocos 论坛: https://forum.cocos.org/t/topic/87352
点击 “阅读原文”下载项目工程
评论