多摄像机的支持能够让你轻松实现高级的自定义效果，好比双人分屏效果，或者场景小地图的生成。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源创计划”，欢迎正在阅读的你也加入，一块儿分享。