如何使用 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;      }  }

將攝影機和畫布綁定腳本上