1500字范文 > RenderTexture实现小地图和炫酷的传送门！（干货收藏）

RenderTexture实现小地图和炫酷的传送门！（干货收藏）

时间：2022-11-06 10:32:32

本篇文章对应Nowpaper老师在B站发布的视频《如何在3D场景中实现炫酷传送门，和简单的小地图功能，RenderTexture技术应用》！

B站链接：/video/BV1K3411m7Ma

Cocos论坛：/t/topic/121977

RenderTexture技术

RenderTexture是游戏引擎的重要技术之一，它的原理是渲染摄像机的画面成为一个纹理，进阶的应用就是附着到材质上，变成对应的功能。

比如：

俯视小地图

屏幕上分屏显示视角

能够看到目的地情景的传送门

狙击枪瞄准镜里的画面

引擎中的摄像机的预览

引擎中画布UI

只不过目标可能是模型也可能是一个平面的精灵，依据不同的需求达到不同的目的。

在 Creator 3 中

游戏开发工具和引擎 CocosCreator 3.x 版本以后，提供了完整的3D世界开发功能，使得我们能够完成前面提到的功能，今天我将简单来展示，在 Cocos Creator 中如何使用RenderToTexture实现小地图和炫酷的传送门。

小地图

首先我准备了一个测试场景，方便展示成果，这个测试场景是我自己随便搭建的，这个还是有很多的问题，就不单独提供了，先来实现小地图，小地图的实现比较简单，几乎不用写代码。

论坛上的其他小地图做法都是直接移动控制第二摄像机的画面来实现，本文使用Sprite精灵来接受和显示渲染纹理，能够更好的定制你的UI画面，具体做法如下：

先建立一个UI Canvas，这个UI中放置一个Sprite精灵，调整到你想要的位置。

然后建立一个摄像机，摄像机向下照射，设置好位置和旋转参数，调整到你想要的观看位置和角度。

然后在资产里，建立一个Render Texture的资产，简单设置一下参数，主要要将资产的Width和Height设置成为小地图同等比例的大小，否则它将显示不出来。

选择摄像机，把摄像机的RenderTexture的目标，指向到这个资产。

然后选择之前的精灵，将这个Render Texture的资产赋给它的SpriteFrame的属性。

保存运行看看，就可以达到渲染效果。但是现在我们发现，移动并不会跟着人物走。

所以要给摄像机简单建立一个 TopCamareFollow 的脚本，在脚本的 Update 里面，不停的为它设置和角色一样的x、z的位置信息。

在这个脚本中添加一个目标指向，在 update 中添加如下代码，除了y以外的所有轴坐标，都和目标同步更新，代码如下：

import{_decorator,Component,Node}from'cc';const{ccclass,property}=_decorator;@ccclass('TopCameraFollow')exportclassTopCameraFollowextendsComponent{@property(Node)target:Node=null;start(){}update(deltaTime:number){this.node.setWorldPosition(this.target.worldPosition.x,this.node.worldPosition.y,this.target.worldPosition.z)}}

将它添加到摄像机中，并将主角作为跟随目标，现在摄像机就可以跟着人物行动了。

在摄像机和 RenderTexture 资产里，有很多有趣的参数，可以各种尝试。

比如：你不喜欢带有透视效果的小地图，也可以将摄像机的拍摄参数设置成为正交，变成无透视的效果，其实很多俯视游戏，都是用这种方法实现。

传送门

也许著名游戏《传送门》曾经震撼于你，也许任意门是你儿时的梦想，现在我们通过简单的开发，让你的游戏里拥有一个。

在目标点设立一个摄像机，比如在遥远的地方有个小岛，记住这是同一个场景。

创建一个摄像机，调整到你想拍摄的的位置。

然后我们为它制作一个脚本，就叫传送门观察者吧！

在代码里定一个目标指向，用来指向将渲染的画面投射到什么物体，然后在start里写下下面的代码。

所以你需要稍微更新一下，然后将需要投射的材质设置和应用到的目标模型上，我的代码就是这样的。

import{_decorator,Component,Node,MeshRenderer,Camera,RenderTexture,Material}from'cc';const{ccclass,property}=_decorator;@ccclass('GateWayCamera')exportclassGateWayCameraextendsComponent{@property(MeshRenderer)target:MeshRenderer=null;start(){constrenderTex=newRenderTexture();renderTex.reset({width:256,height:256});constcameraComp=this.getComponent(Camera);cameraComp.targetTexture=renderTex;constpass=this.target.material.passes[0];constdefines={SAMPLE_FROM_RT:true,...pass.defines};constrenderMat=newMaterial();renderMat.initialize({effectAsset:this.target.material.effectAsset,defines,});this.target.setMaterial(renderMat,0);renderMat.setProperty('mainTexture',renderTex,0);}}

回到Creator中，在你想要的位置上做一个模型，什么形状都行，取决于你的传送门到底是什么形式的。

然后我们需要为它换一个材质，用来接收RenderTexture 。

新建一个材质，然后将 Sample From Rt 选项选上，并开启漫反射贴图(Use Albedo Map)，保存设置。

将这个材质应用到传送门的展示的模型上，替换掉默认第一个0索引的材质。

为传送门摄像机添加刚刚写的脚本，并且将目标Target的属性将刚刚建立的模型引用。

运行，控制角色来看看！可以发现，目标的画面已经投射到了这个模型上，如果角度有点问题，说明模型坐标不太对，做一下调整旋转即可。

在这个模型上就渲染出了目标摄像机的画面，但是它目前只是一个固定的摄像机，从不同的角度来观察似乎太呆板了。

它应该跟着主角在移动的时候，会相对着你的主摄像机一同同步，为了实现这个功能我们得写个同步脚本了，先创建一个脚本就叫 GateWayCameraSync 代码如下：

import{_decorator,Component,Node,Vec3,v3}from'cc';const{ccclass,property}=_decorator;@ccclass('GateWayCameraSync')exportclassGateWayCameraSyncextendsComponent{@property(Node)target:Node=null;privateoffset:Vec3=null;privatevec3:Vec3=v3();start(){this.offset=this.node.worldPosition.clone().subtract(this.target.position);}update(deltaTime:number){if(this.target){Vec3.add(this.vec3,this.target.worldPosition,this.offset);this.node.setWorldPosition(this.vec3);this.node.setWorldRotation(this.target.worldRotation);}}}

在最开始，它需要计算出和主摄像机的差值，通过target属性引用到目标摄像机。

在脚本运行的开始，通过向量的减法，得到相对于目标的世界坐标的偏移量，然后在update中不停的作同步。

现在返回到Creator，为摄像机挂上这个脚本。将主摄像机添加引用，为了更自然，你需要将摄像机稍微调整一下位置，因为初始位置和传送门其实并不是非常合适的。

真正的传送

传送门的效果肯定是传送，所以我们还得完成传送操作。为了达成这个能力，我们将会用上触发器。

选中传送门的模型，为它添加一个碰撞体，把作为触发器的选项勾上，由于它不是物理物件，所以不需要添加物理实体。

然后添加一个脚本，叫做触发传送，用来将触发碰撞后，将自己给瞬移到目标点，代码如下：

import{_decorator,Component,Node,Collider}from'cc';const{ccclass,property}=_decorator;@ccclass('TriggerTransfer')exportclassTriggerTransferextendsComponent{@property(Node)target:Node=null;start(){constc=this.getComponent(Collider);c.on('onTriggerEnter',this.onTriggerEnter,this);}privateonTriggerEnter(){this.node.setWorldPosition(this.target.worldPosition);}}

上面的代码中，使用了一个目标的引用来快速瞬移到它的坐标点。

其实手动输入一个坐标也可以的，但是有个节点物体作参照，显得更直观一点。

先在 Start 的时候开始监听触发事件，触发器事件触发的时候，将自己的位置 position 直接设置成为目标 position 属性，就达到了瞬移效果。

在回到 Creator 将脚本添加到主角身上，找到引用的物体，我就简单点，直接将目标点设置到了传送门摄像机身上。

现在看看效果，当主角碰到传送门物体的时候，触发了碰撞事件，从而将自己传送到了目标点。