如何使用 Creator【摄像机组件】实现局部缩放的效果？

2019 年 10 月 8 日
筆記

本文由社区新成员「白玉无冰」撰写，感谢大家的热情创作！

多摄像机的支持可以让你轻松实现高级的自定义效果，比如双人分屏效果，或者场景小地图的生成。

摄像机是什么

摄像机(camera)是玩家观察游戏世界的窗口。可以这样理解，你在电视?电脑?上看到的演唱会直播等，会有不同的视角切换，这是因为切换不同的摄像机?视角实现的。创建场景时，Creator 会默认创建一个名为 Main Camera 的摄像机，作为这个场景的主摄像机。

添加一个摄像机

我们先创建一个新的typescript项目。

接着在场景中添加一个摄像机，并改名为camera。

添加摄像机显示画布

在场景中添加一个sprite用于这个摄像机显示的画布。因为用摄像机会上下反转，要修改scaleY为-1。混合模式改成ONE。

摄像机不能对着显示画布里的内容，就像你对着显示屏幕直播，会出现无限个小屏幕。为此，我们要为画布添加一个分组。

而摄像机不能显示这分组。

绑定摄像机到画布

修改Helloworld.ts里的代码，添加camera和画布sprite的声明。绑定camera的targetTexture到显示画布spriteFrame。参考代码如下:

//Helloworld.ts  const { ccclass, property } = cc._decorator;  @ccclass  export default class Helloworld extends cc.Component {      @property(cc.Camera)      camera: cc.Camera = null;      @property(cc.Sprite)      sp_camera: cc.Sprite = null;      start() {          const texture = new cc.RenderTexture();          texture.initWithSize(this.sp_camera.node.width, this.sp_camera.node.height);          const spriteFrame = new cc.SpriteFrame();          spriteFrame.setTexture(texture);          this.sp_camera.spriteFrame = spriteFrame;          this.camera.targetTexture = texture;      }  }

将摄影机和画布绑定脚本上