UGUI之在UI上使用RenderTexture顯示模型+AlphaBlend特效

在UI上顯示模型無非就是2種。

1.在兩個UI錄影機中夾一層3d錄影機，利用錄影機的Viewport Rect屬性對模型進行裁切。

2.使用RenderTexture渲染在RawImage後顯示在UI上。

我上一個項目就是采取第一種方法，用起來很不舒服。因為有很多效果都做不了，比如就是UI上蓋模型，在蓋UI，再蓋模型這種，還有就是在滑動清單中顯示模型，滑動裁切的話都很麻煩。

今天我想說的就是第二種，使用RenderTexture的方式來渲染模型。

先說缺點：

1.為了保證顯示上的效果RenderTexture的檔案區域必須大于RawImage的區域，我們目前用的是乘2倍。比如RawImage的區域是512X512，那麼就得建立一個1024X1024大小的RenderTexture才能保證渲染效果。

2.如果人物身上有一些特殊的效果，比如outline描邊這樣的，放在RenderTexture上就是達不到效果。

3.如果模型身上帶有AlphaBlend這樣的特效，因為AlphaBlend要和背景做混合，而RenderTexture不像Camera那樣有背景，顯示上就會有 問題。（下面我會說我目前是怎麼解決的）

優點的話，就很爽了。完全和UI一樣，層級順序，清單中顯示模型、裁切、等等都很友善了。

RenderTexture顯示AlphaBlend特效的方法

因為AlphaBlend特效需要和背景做混合，是以我們可以給它後面墊一個底圖。這樣就能解決在RenderTexture上顯示帶AlphaBlend的特效的模型。

建立一個Sprite 可以直接把UI的Sprite放上去。如果模型帶特效就用Sprite，如果模型不帶特效，完全可以用之前UI的制作方式，很友善靈活的切換它。

1.png (53.84 KB, 下載下傳次數: 0)

下載下傳附件  儲存到相冊

2017-4-5 10:15 上傳

如下圖所示，Game視圖中顯示的效果，這個翅膀的火焰特效就是alphablend

2.png (160.93 KB, 下載下傳次數: 0)

下載下傳附件  儲存到相冊

2017-4-5 10:15 上傳

如下圖所示，因為底圖不止一張，大家看到下面還有好幾張花紋了嗎？都可以用Sprite2d疊在下面。

3.png (308.29 KB, 下載下傳次數: 0)

下載下傳附件  儲存到相冊

2017-4-5 10:16 上傳

渲染RenderTexture的錄影機，這裡已經能看出來渲染的是正确的，下面被水印擋住了 圖檔尺寸是1401*540 ARGB32 4.3M。為什麼尺寸這麼大呢？上面我也提過，因為RenderTexture尺寸和RawImage一樣的話，效果會比較差，是以這裡乘了2倍。

4.png (207.76 KB, 下載下傳次數: 0)

下載下傳附件  儲存到相冊

2017-4-5 10:16 上傳

這樣問題來了，錄影機的大小或者fov變了，那豈不是每次都要手動去把sprite的size對齊，手動設定localScale。這樣就太麻煩了。

下面我再給大家分享一個腳本，正交或者非正交錄影機都支援的。自動根據錄影機的區域來自動自适應計算sprite的size 。（這個腳本挂在Sprite上即可）

[C#] 純文字檢視 複制代碼 ?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

using System.Collections; using System.Collections.Generic; using UnityEngine; public class SpriteFull : MonoBehaviour { //設定SpriteRender和錄影機的距離 public float distance = 1.0f; private SpriteRenderer spriteRenderer = null ; void Start() { spriteRenderer = GetComponent<SpriteRenderer> (); spriteRenderer.material.renderQueue =2980; //這段代碼非常重要！！！大家務必要加上，不然透明的渲染層級會出錯 } void Update() { Camera camera = Camera.main; camera.transform.rotation = Quaternion.Euler (Vector3.zero); float width = spriteRenderer.sprite.bounds.size.x; float height = spriteRenderer.sprite.bounds.size.y; float worldScreenHeight,worldScreenWidth; //這裡分别處理正交和非正交錄影機 if (camera.orthographic) { worldScreenHeight = Camera.main.orthographicSize * 2.0f; worldScreenWidth = worldScreenHeight / Screen.height * Screen.width; } else { worldScreenHeight = 2.0f * distance * Mathf.Tan(camera.fieldOfView * 0.5f * Mathf.Deg2Rad); worldScreenWidth = worldScreenHeight * camera.aspect; } transform.localPosition = new Vector3 (camera.transform.position.x, camera.transform.position.y, distance); transform.localScale = new Vector3 (worldScreenWidth / width, worldScreenHeight / height, 0f); } }

上面有段代碼非常重要，切記一定要設定sprite的renderQueue ，因為ui是3000這裡和UI不一樣就行，不然透明會顯示錯誤。

最後，墊在模型下面可能一張圖是不夠的，可能還有一些花紋，可能還有花紋需要鏡像等，這樣的圖檔就得需要手動設定一下縮放和位置了。

OK 大家如果有疑問歡迎再下面給我留言，繼續幹活了~