cocos creator 用摄像机实现局部缩放的效果，camera 小地图,局部放大，摄像机初学者新手教程【白玉无冰】每天进步一点点

白玉无冰 lamyoung

5123人浏览 · 2019-09-30 07:51:58

白玉无冰 lamyoung · 2019-09-30 07:51:58 发布

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

摄像机是什么

摄像机(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，运行预览：