[Unity]UGUI 原理篇 (一)：Canvas 渲染模式

參考Canvas 渲染模式 Unity – Manual: Canvas

Canvas: Canvas Component 是 UI布局和渲染的抽象空間，所有的UI都必須在Canvas之下(子物件)

Render Mode
UI渲染的方式有三種
  • Screen Space - Overlay : 螢幕空間 - 覆蓋 
  • Screen Space - Camera : 螢幕空間 - 攝影機
  • World Space : 世界座標空間

Screen Space - Overlay







Overlay UI rendered over scene objects

在此模式下不會參照到Camera，UI直接顯示在任何圖形之上
  • Pixel Perfect : 可以使圖像更清晰，但是有額外的性能開銷，如果在有大量UI動畫時，動畫可能會不平順
  • Sort Order : 深度值，該值越高顯示越前面
  • Target Display : 在特定的Camera才會顯示
  • Additional Shader Channels : 自訂Shader

Screen Space – Camera







Camera mode UI with scene objects in front

使用一個Camera作為參照，將UI平面放置在Camera前的一定距離，因為是參照Camera，如果螢幕大小、分辨率、Camera視錐改變時UI平面會自動調整大小。如果Scene中的物件(GameObject)比UI平面更靠近攝影機，就會遮擋到UI平面。

  • Render Camera：用於渲染的攝影機
  • Plane Distance：與Camera的距離
  • Sorting Layer：Canvas屬於的排序層，在 Edit->Project Setting->Tags and Layers->Sorting Layers 進行新增，越下方的層顯示越前面
  • Order in Layer：Canvas屬於的排序層下的順序，該值越高顯示越前面

World Space











World space UI intersecting scene objects

把物體當作世界座標中的平面(GameObject)，也就是當作3D物件，顯示3D UI
  • Event Camera：處理UI事件(Click、Drag)的Camera，所設定的Camera才能觸發事件

留言

張貼留言

這個網誌中的熱門文章

[Android]JavaScript與Android溝通

------------有問題的方法------------------------------------------------------------------- 在 Android 裡將網頁載入到畫面 使用  WebView 元件 就可以很輕鬆達成任務， 如果要再加上跟 JavaScript 的 互動 的話 Android 系統也提供了 互通機制 可從 Android 呼叫 JavaScript 的函式 或從 JavaScript 呼叫 Android 的函式。 設定 Android 端 建立一個類別 JavaScriptInterface 專門 給 JavaScript 呼叫 1 2 3 4 5 6 /** 建立給 JavaScript 呼叫的函式 **/ public class JavaScriptInterface {      public void fun1() {          //Android 要執行的程式碼      } } 設定 WebView 的功能 1 2 3 4 5 //啟用 WebView 的 JavaScript 執行功能 webView.getSettings().setJavaScriptEnabled( true ); //設定允語 JavaScript 呼叫的對應名稱 webView.addJavascriptInterface( new JavaScriptInterface(), "android" ); 設定 JavaSript 端 1 2 3 4 5 <script type= "text/javascript" >      function fun2() {          //JavaScript 要執行...
閱讀完整內容

[Android]加載圖片導致內存溢出(Out of Memory 異常)

方案一、讀取圖片時注意方法的調用，適當壓縮 儘量 不要使用 setImageBitmap 或 setImageResource 或 BitmapFactory.decodeResource 來設置一張大圖，因為這些函數在完成 decode 後，最終都是通過 java 層的 createBitmap 來完成的，需要消耗更多記憶體。 因此， 改用先通過 BitmapFactory.decodeStream 方法 ，創建出一個 bitmap ，再將其設為 ImageView 的 source ， decodeStream 最大的秘密在於其直接調用 JNI>>nativeDecodeAsset() 來完成 decode ，無需再使用 java 層的 createBitmap ，從而節省了 java 層的空間。         InputStream is =   this .getResources().openRawResource(R.drawable.pic1);         BitmapFactory.Options options =   new   BitmapFactory.Options();         options. inJustDecodeBounds   =   false ;         options. inSampleSize   = 10;     //   width ， height 設為原來的十分一           Bitmap btp = BitmapFactory. decodeStream (is,  null , options); 如果在讀取時加上圖片的 Config 參數，可以跟有效減少載入的記憶體，從而跟有效阻止拋...
閱讀完整內容