CocosCreator主角保持屏幕中间

快来打我* 2022-08-28 04:53 217阅读 0赞

## 准备工作 ##

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

三个摄像头——第一个显示map，第二个显示hero，第三个显示UI\_2D

地图节点——map，花地图

主角节点——hero，红色sprite

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX-Wkp-eMqg_size_20_color_FFFFFF_t_70_g_se_x_16][]

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX-Wkp-eMqg_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX-Wkp-eMqg_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX-Wkp-eMqg_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX-Wkp-eMqg_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

其他节点设置“Layer”为“UI\_2D”。

## 脚本设置 ##

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX-Wkp-eMqg_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

再看脚本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) {
    
        }
    }

## 查看运行结果 ##

![5b4e46b192284745a29c424e415e5c16.gif][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX-Wkp-eMqg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/fb449df74eb84d23a9e6ea01632f9dc1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX-Wkp-eMqg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/70f5397d042a42a1864649d240f38371.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX-Wkp-eMqg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/6c587fab212d4c35ae0863eb47a3afb3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX-Wkp-eMqg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/5e7f1157b27e4fd19e2490c6e295dcde.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX-Wkp-eMqg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/bcdc5efaa2394f5fb0d7ef045e9c925d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX-Wkp-eMqg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/c3f55c217bad4e0abd4cdcb281fc5855.png
[5b4e46b192284745a29c424e415e5c16.gif]: /images/20220828/4fd38b71de5e49f199fa9e4e5ad82343.png