详解RenderToTexture的实用玩法!Cocos Creator实现FPS经典瞄准镜+监视器

引言:前两周,「Cocos Star Writer」Nowpaper 在《笼中窥梦》视错觉效果的实现中使用了 RenderToTexture 技术,本次 Nowpaper 将继续拓展 RenderToTexture 的使用法。

RenderToTexture 是个非常有趣的技术,它能够将一个摄像机画面渲染成纹理,然后和材质结合,让某一个 Mesh 显示成指定的画面。在游戏开发中,它被广泛用于实现镜子、监视器画面、瞄准镜、传送门,甚至用户界面显示、动态纹理喷涂等。

a25c6798d8d169f369b82ff9f43de625.gif

b2221a688a9ecc4725bc9f24d55ad802.gif

在 Cocos Creator 3.4 以后的版本中,RenderToTexture 技术已经相对完善,使用起来也更加方便。在我之前的传送门分享中,传送门里的画面就使用了这个技术来实现,当时还得写一些代码,而现在只需要在编辑器中编辑,就可以轻松实现可渲染纹理了。

今天我们将继续拓展一下,使用 RenderToTexture 做一个瞄准镜以及显示指定摄像机的画面监视器。

PS.源码和视频教程见文末。本次使用的是 v3.5。

准备

首先新建一个项目并搭建游戏场景。我这里就搭建一个简单的街道,包含一些物体,让场景看起来稍微不那么单调。

82ccad570d768ad55cc4a34f1bb3fdc9.jpeg

瞄准镜

一般来说当角色瞄准的时候,我们可以看到在镜头中,显示的画面被放大,视觉更加前向。

015eeaf78eb42de6b04854c3641c884d.jpeg

这个效果的原理其实就是:在枪械的瞄准位置增加一个摄像机,然后将摄像机的画面渲染到一个纹理上。

509b8448608305e7e3396816903b9d5f.png

这样的话事情就简单了。我准备了一个枪械,它带有瞄准动画,现在为他增加一个第一人称摄像机,通过调整让它看起来比较合适。

e63a78d0937402e349f1d987a43db3ba.jpeg

现在新建一个可渲染纹理:

7b9058e774e122db43cd6ca11fb3bff2.png

图像宽高数值默认都是1,这个需要我们依据自己的情况作修改,通常是按照视口的大小比例来调整。如果要想完美适配的话,最好是代码中作一些控制,在这里我们就直接使用 512x512:

ac9cb30c10cdb5f8ad74218a1579dd0e.png

现在再创建一个材质:

70d5e7aca02b98847922a8fd0c7b89a6.png

着色器选择为内置-unlit:

6fa48cc409aaf05b07c5e9e111cc9af0.png

开启 UseTexture,勾选 RTTexture 选项,将刚刚新建的可渲染纹理拖动进下面的引用中:

72b32ca9678c816aef0c760453ee9d68.jpeg

现在为瞄准镜建立一个圆形面片。一般来说建模师会提供一个,在这里我们就直接自己放个圆柱形,通过节点调整到对应的 Node 中:

17896dca9ed670fbc76bf951f8a5d369.jpeg

6cf78464519a0cfe42a0f5ac8e271dc5.jpeg

现在选择枪械的动画,去掉动画预烘培:

d324fe92b2e5d858414260d40a5b090f.png

关于动画控制脚本,在这里就不提供了,播放 Animation 的指定动画即可:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值