cocos creator | 用摄像机实现局部缩放的效果

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

摄像机是什么

摄像机(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;
    }
}

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

运行预览效果:

控制摄像机

我们还要学会操作摄像机，就像演唱会直播一样，有时摄像机看歌手，有时要看下舞者，有时要近距离看，有时要看的远一点。找到摄像机的属性节点，Position属性是摄像机看的位置，而Zoom Ratio表示摄像机的远近。

修改Position为100,100,Zoom Ratio为0.8，运行预览：

添加滚动条控制摄像机

我们还可以添加不同的滚动条来控制摄像机的距离，位置。

获取完整教程源码在公众号后台留言摄像机

---

为你推荐

---