专栏首页白玉无冰cocos creator | 用摄像机实现局部缩放的效果

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

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

摄像机是什么

摄像机(camera)是玩家观察游戏世界的窗口。可以这样理解,你在电视?电脑?上看到的演唱会直播等,会有不同的视角切换,这是因为切换不同的摄像机?视角实现的。创建场景时,Creator 会默认创建一个名为 Main Camera 的摄像机,作为这个场景的主摄像机。

添加一个摄像机

我们先创建一个新的typescript项目。

接着在场景中添加一个摄像机,并改名为camera

添加摄像机显示画布

在场景中添加一个sprite用于这个摄像机显示的画布。因为用摄像机会上下反转,要修改scaleY-1。混合模式改成ONE

摄像机不能对着显示画布里的内容,就像你对着显示屏幕直播,会出现无限个小屏幕。为此,我们要为画布添加一个分组。

而摄像机不能显示这分组。

绑定摄像机到画布

修改Helloworld.ts里的代码,添加camera和画布sprite的声明。绑定cameratargetTexture到显示画布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表示摄像机的远近。

修改Position100,100,Zoom Ratio0.8,运行预览:

添加滚动条控制摄像机

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

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

本文分享自微信公众号 - 白玉无冰(lamyoung-com),作者:lamyoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • cocos creator | 用摄像机实现背景滚动

    创建一个新的typescript项目。 在场景中添加一个场景两倍宽的画布节点,并将两张背景图放在画布节点内。

    白玉无冰
  • 四叉树与碰撞检测 !Cocos Creator !

    引入脚本 QuadtreeCollision.ts , 新建一个 QuadtreeCollision ,并初始化为世界坐标系下的对齐轴向的包围盒(AABB)。

    白玉无冰
  • JavaScript | 为你的日志添加颜色【译】

    在console里添加%c说明符?‍?。这可以帮助你很容易找到你要打印的日志?。特别是在一个有着成千上万个日志的大型应用中,给你的日志加上样式,就不会让你重要的...

    白玉无冰
  • 如何使用 Creator【摄像机组件】实现局部缩放的效果?

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

    张晓衡
  • Linux下巧用chattr、watch命令的实例

    一、起因 前些日子,张戈在日志备份服务器加入了日志压缩的计划任务(详见服务器日志备份超节省空间的思路),结果发现监控总是发来 tar 的报警,提示存在 tar ...

    张戈
  • cmake:LINK : error LNK2001: 无法解析的外部符号 WinMainCRTStartup

    版权声明:本文为博主原创文章,转载请注明源地址。 https://blog.csdn.net...

    用户1148648
  • Python语法垃圾回收机制原理解析

    解释器在执行到定义变量的语法时,会申请内存空间来存放变量的值,而内存的容量是有限的,这就涉及到变量值所占用内存空间的回收问题,当一个变量值没有用了(简称垃圾)就...

    砸漏
  • Golang语言 redis 使用

    package main import ( "fmt" "github.com/garyburd/redigo/redis" ) func ...

    李海彬
  • Golang语言 redis 使用

    package main import ( "fmt" "github.com/garyburd/redigo/redis" ) func ...

    李海彬
  • 日本人眼中的中国制造企业:聪明反被聪明误

    事实上,中国离强国还有很远很远很远的路要走,要想成为真正的经济强国,不能依靠炒房地产、炒金融、吹IT泡沫,还需要向日本学习务实精神,通过脚踏实地、培养扎实的实业...

    华章科技

扫码关注云+社区

领取腾讯云代金券