CocosCreator主角保持屏幕中间

准备工作

我们创建一个test.scene，场景中包括：

三个摄像头——第一个显示map，第二个显示hero，第三个显示UI_2D

地图节点——map，花地图

主角节点——hero，红色sprite

UI节点——UI，两个UI按钮

如果想实现三个摄像头显示不同的节点，需要把在“项目设置”中增加“组”。

然后Camera设置Visibility为“map”；Camera1设置Visibility为“Test”，Camera2设置Visibility为“UI_2D”。

map节点设置的“Layer”为“map”。

hero节点设置“Layer”为“test”。

其他节点设置“Layer”为“UI_2D”。

脚本设置

将脚本绑定到Canvas，脚本的MapCamera属性设置为Camera节点。

再看脚本Test.ts：

import { _decorator, Component, Node, Camera, EventTouch, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Test')
export class Test extends Component {

    @property(Camera)
    mapCamera: Camera = null!;

    start() {
        this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
    }


    onTouchStart(event: EventTouch) {

    }

    onTouchMove(event: EventTouch) {
        console.log(event.touch!.getUILocation().x, event.touch!.getUILocation().y)
        this.mapCamera.node.setPosition(this.mapCamera.node.position.add3f(-event.touch!.getUIDelta().x, -event.touch!.getUIDelta().y, 0));
    }

    onTouchEnd(event: EventTouch) {

    }
}

查看运行结果