[cocos creator] - CocosCreator 双摄像机固定 UI

前言

在横版过关游戏中经常需要将角色得分,血条等 UI 固定在屏幕左上角。

image.png

(超级玛丽顶部 UI 始终跟随摄像机移动)

如何在 CocosCreator 中实现 UI 固定的效果呢?

本文参考 KUOKUO 分享的文章:CocosCreator之KUOKUO带你做双摄像机-单独渲染UI

准备工作

下面是我正在制作的新游《名为怪物的游戏》中开头部分的小游戏,顶部有角色生命条数和得分,这两个 UI 需要始终处在左上角的位置。

名为怪物的游戏

《名为怪物的游戏》开头小游戏部分

新建一个空节点来作为 UI 节点的根节点:

image.png

接着创建 TypeScript 脚本 mgs_follow.ts,让摄像机开始移动(当然用 JavaScript 也可以,用什么语言实现无关紧要):

const { ccclass, property } = cc._decorator;

@ccclass
export default class Mgs_Follow extends cc.Component {
    /** 摄像机节点 */
    start(): void {
        this.mainCamera.runAction(cc.moveBy(5, 100, 0));
    }
}

把脚本文件拖到随便一个节点,然后把 Canvas/Main Camera 节点拖到脚本组件中的 mainCamera 中:

image.png

然后点击运行,在游戏场景中可以发现屏幕缓缓移动,上面的 UI 也跟着移动了,这显然不是我们想要的。

解决方案

可以创建第二个摄像机,单独渲染希望固定在屏幕的 UI。

步骤如下:

1、新建分组

创建新的分组命名为 ui(取名可以任意)。

然后把 GameUIRoot 节点的分组改成 ui 分组:

image.png

2、新建摄像机

新建一个摄像机,命名为 UI Camera(取名随意)。

image.png

点击右侧的 Everything,然后再把 ui 分组勾起来,这里的操作是让 UI Camera 只渲染 ui 这个分组。

3、主摄像机设置

同理,既然我们现在有 UI 摄像机单独渲染 UI 节点,那主摄像机那边就不需要了,选择 Main Cameraui 分组去掉:

image.png

然后再测试一下游戏就 OK 了!

原理

cocos creator 中的摄像机是用来显示玩家可以看到的内容,由于我们控制的是主摄像机,如果让主摄像机渲染了 ui 分组,那么势必会跟着移动,而这里我们新建了一个 UI 摄像机,UI 摄像机不会移动,并且它只渲染 ui 分组,因此就实现了 UI 固定的功能。

讨论

还没有人评论~