放大镜效果

对画面的某个位置进行放大和缩小,是某些类型游戏里面必不可少的功能,比如常见的地图缩放,局部细节放大等等。它核心是对相机应用,异名基于此实现一个放大镜的demo

demo

实现思路

首先要理解相机,和现实的相机一样,相机是用来拍摄画面的,然后生成照片也就是Texture,但是引擎内的相机相当于人眼睛,它每一帧都在拍摄画面,可能你没用留意到,我们初始化的每个场景的canvas下都默认有一个Main Camera,它就是用来拍摄整个场景的内容,然后投影到画布上的。异名翻了一下以前自己接触Camera这个概念的时候的笔记,在这里贴一下:

?问题一:该选择相机那种模式?

根据camera的成像原理,一共有两种模式的相机。一种是透视投影,它是锥形的成像模式,是从某个投射中心将物体投射到单一投影面上所得到的透视图,成像效果远小近大,与人们观看物体时所产生的视觉效果非常接近,在做3D场景的时候,就必须用该模式来拍摄3D的画面。另外一种是正交投影模式,也叫"平行投影",就是把图像通过平行光线投影到画面上,可以理解成一张平面上的画,它就是用来拍摄2D画面的。

?问题二:如果场景内有多个相机,可是屏幕只有一个,这时候这些相机是如何利用屏幕的?

引擎输出画面的时候会把一个一个的相机的图像叠加起来;

?问题三:多个相机的时候,如何确定那个相机先,哪个相机后呢?

相机有一个depth属性, depth小的先绘制到屏幕, depth大的后绘制到屏幕。

?问题四:有多个相机,但是物体是唯一的;多个相机的话,一个物体会被绘制多次?

  • 可以通过合理分组给每一个相机选取拍摄具体要拍摄的物体
  • 相机会绘制属于自己渲染分组里面的物体

?问题五:如何清除屏幕?

  • 相机有—个clearFlag如果你设置了,它在绘制画面的时候,会清理屏幕
  • 一般只给前面的相机设置clearFlag;后面相机都不能再设置,不然会把前面相机绘制的内容清除掉

把思路拉回到放大镜demo中,要实现放大镜,其实就是多创造一个相机去拍摄需要放大的物体,然后调整相机的缩放比例,使投影的物体放大或者缩小对应的倍数,然后配合使用Mask组件去裁剪我们需要的局部位置,mask的编辑器设置请参考项目源码,相机初始化代码实现如下:

initCamera() {
  let visibleRect = cc.view.getVisibleSize();

  let texture = new cc.RenderTexture();
  texture.initWithSize(visibleRect.width, visibleRect.height);
  let spriteFrame = new cc.SpriteFrame();
  spriteFrame.setTexture(texture);
  this.mirrorCameraNode.getComponent(cc.Camera).targetTexture = texture;

  this.tempCameraSpriteNode.getComponent(cc.Sprite).spriteFrame = spriteFrame;
  this.tempCameraSpriteNode.scaleY = -1;
}

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star)

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

原始发表时间:2020-04-21

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 全民打枪!在3D模型上的2D血条如何实现?

    在大多数 3D 对战或者打怪游戏中,角色身上的血量条会很直观的显示出生命值,伤害值等信息,让游戏效果更加完美,先上两张简单的效果图:

    张晓衡
  • 小游戏开发运营模型之—游戏调优篇(1)

    我们社区公众号,主要是讲小游戏开发和技术,上图是晓衡粗解的小游戏开发运营挣钱模型。

    张晓衡
  • Creator3D 打砖块子弹发射,以及摄像机平滑移动控制!

    前面一篇教程《Creator3D图文教程【打砖块】》,我们讲了打砖块游戏中的 3D 物体的场景布局、材质资源、物理刚体与碰撞组件,接下来本篇文章重点介绍“子弹的...

    张晓衡
  • 初识视觉SLAM:用相机解决定位和建图问题

    SLAM 是Simultaneous Localization and Mapping 的缩写,中文译作“同时定位与地图构建”。它是指搭载特定传感器的主体,在没...

    博文视点Broadview
  • 机器视觉(第4期)----工业相机综述及接口介绍

    上期我们一起学习了镜头的相关知识,戳下链接: 机器视觉(第3期)----图像采集之镜头原理详述 这期我们一起学习相机和接口的相关知识,工业相机是机器视觉系统中的...

    智能算法
  • 解决Linux内核问题实用技巧之-dev/mem的新玩法

    简单来讲,/dev/mem是系统物理内存的映像文件,这里的 “物理内存” 需要进一步解释。

    Linux阅码场
  • java之struts2之ServletAPI

    在之前的学习中struts2已经可以处理大部分问题了。但是如果要将用户登录数据存入session中,可以有两种方式开存入ServletAPI。

    Vincent-yuan
  • 揭秘eBay四大系统 从行为数据中寻找价值

    喜欢海淘的朋友应该对eBay并不陌生,如果你还不了解,可以把eBay+PayPal理解为淘宝+支付宝的组合,当然eBay不仅有C2C还有B2C的模式。虽然介绍...

    灯塔大数据
  • 大数据玩家eBay:猜出你的购买欲

    早在2006年,eBay就成立了大数据分析平台。为了准确分析用户的购物行为,eBay定义了成百上千种类型的数据,并以此对顾客的行为进行跟踪分析。然而,这同时也为...

    小莹莹
  • 如何在Jetson TX2上使用CSI相机

    GPUS Lady

扫码关注云+社区

领取腾讯云代金券