益智3D小游戏技术分享,立方体数字 Cube Digits,Cocos Creator 3.7.1

白玉无冰

共 3318字,需浏览 7分钟

 ·

2023-04-07 06:01

最近开发了一款益智3D小游戏,分享其中的一些技术实现~

84a5b695be2e290f3c9a0ca0d1aeca72.webp 效果

视频

可以参考实现效果与技术讲解的视频[1],介绍了如何创建获取项目[2],编辑关卡,以及一些技术实现。

玩法

当你滚动你的立方体时,你会遇到其他带有数字的立方体,你可以加、减或乘以匹配最终立方体上的数字。

55a59257ca897dec62105cc33bc8dff0.webp

体验

可直接进入微信小游戏【 不停歇的球】体验~

环境
  • 引擎版本:Cocos Creator 3.7.1
  • 编程语言:TypeScript
技术要点

关卡编辑

采用预制体的方式设计关卡。

f359e721ae98143fcedbcd12506b2bc4.webp

每个方块都会挂载一个辅助脚本,控制方块的类型,数值等显示

16ea774fe39d01d5cf171673a0756d9a.webp

每个关卡里设计了不同的方块类型。

ecfc99a1914104ff15f591717c8e9959.webp

以及不同的计算方式

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

  1. 使用 Label 组件
  2. 添加 RenderRoot2D 组件
  3. 添加深度测试开启的材质 (builtin-sprite)
cc8885516ca19f337bccefd85a815d56.webp

方法2

  1. 添加无光照的材质,选择透明
  2. 使用 Label 的纹理
      
      const tex = this.lb.spriteFrame.texture
this.meshLabel.sharedMaterial.setProperty("mainTexture", tex)
ace15d158563d43f875be62143285084.webp

方法3

可参考3DUI in Cocos Creator,但是此项目没使用这个方法😄

35a8e782b95060114da6b3fd0b469e69.webp

立方体滚动

1e71ebcb302eb354930958d281d6b8aa.webp

实现思路类似2DUI中的锚点,人为添加一个辅助节点作为滚动方块的锚点。

  1. 将立方体添加到一个辅助节点
  2. 旋转辅助节点
  3. 旋转前后要缓存原来节点数据,在变化前后还原节点数据

核心代码如下

      
      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

点击 阅读原文”下载项目工程

浏览 40
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报