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.