I’m currently working on a 2D game project that needs to use multiple cameras. One camera is for gameplay and the second is for HUD like a floating button. I faced something wrong while using multiple cameras on the native platform. So, I decided to create a simple project to implement multiple cameras.
I created a simple scene like the one below. There are two nodes, one in the UI_2D
layer, and the second in the HUD
layer. Which HUD
layer is the user layer (layer 19)
and here is the node tree, there are two cameras. One is the default camera of the canvas, and the second is a dedicated camera just for focusing the HUD
layer.
this is the property of Camera
:
and this is the property of HUDCamera
:
Beside that, I create a simple code to make sure the Ortho Height
of the HUDCamera
is the same with Camera
. Here is the code:
import { _decorator, Camera, Component } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('Main')
export class Main extends Component {
@property(Camera)
private mainCamera: Camera = null;
@property(Camera)
private hudCamera: Camera = null;
protected onLoad(): void {
this.hudCamera.orthoHeight = this.mainCamera.orthoHeight;
}
}
When I try to run this project in simulator or browser, it works fine.
But, when I compile it into native platform (android). Here’s the result:
I tried another way. So, I created a new Canvas
called HUDCanvas
and set the visibility of the HUDCanvas
camera to the HUD
layer. It’s fine in simulators and browsers, but still has the same problem on native platforms.
Does anyone know how to implement multiple cameras like this and have it work well on native platforms? Or maybe there is something wrong with my implementation?
Thank you in advance.