多攝像機的支持能夠讓你輕鬆實現高級的自定義效果，好比雙人分屏效果，或者場景小地圖的生成。node
攝像機是什麼
攝像機(camera)是玩家觀察遊戲世界的窗口。能夠這樣理解，你在電視📺電腦💻上看到的演唱會直播等，會有不一樣的視角切換，這是由於切換不一樣的攝像機📹視角實現的。建立場景時，Creator 會默認建立一個名爲 Main Camera 的攝像機，做爲這個場景的主攝像機。web
添加一個攝像機
咱們先建立一個新的typescript項目。typescript
接着在場景中添加一個攝像機，並更名爲camera。
shell
添加攝像機顯示畫布
在場景中添加一個sprite用於這個攝像機顯示的畫布。由於用攝像機會上下反轉，要修改scaleY爲-1。混合模式改爲ONE。微信
攝像機不能對着顯示畫布裏的內容，就像你對着顯示屏幕直播，會出現無限個小屏幕。爲此，咱們要爲畫布添加一個分組。app
而攝像機不能顯示這分組。ui
綁定攝像機到畫布
修改Helloworld.ts裏的代碼，添加camera和畫布sprite的聲明。綁定camera的targetTexture到顯示畫布spriteFrame。參考代碼以下:this
//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;
}
}
將攝影機和畫布綁定腳本上spa
運行預覽效果:.net
控制攝像機
咱們還要學會操做攝像機，就像演唱會直播同樣，有時攝像機看歌手，有時要看下舞者，有時要近距離看，有時要看的遠一點。找到攝像機的屬性節點，Position屬性是攝像機看的位置，而Zoom Ratio表示攝像機的遠近。
修改Position爲100,100,Zoom Ratio爲0.8，運行預覽：
添加滾動條控制攝像機
咱們還能夠添加不一樣的滾動條來控制攝像機的距離，位置。
獲取完整教程源碼在公衆號後臺留言攝像機
爲你推薦
cocos creator 實現截屏，截圖，切割，轉成 base64。
爲什麼cocos creator發佈的facebook小遊戲的載入進度條從0%飛向100%
本文分享自微信公衆號 - 白玉無冰（lamyoung-com）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。