簡單的 Logo 場景(淡入淡出效果)



本篇示範一個簡單的 Logo 淡入淡出流程,首先必須準備一張 .png 圖檔作為 Logo 顯示在螢幕上,為了避免圖檔模糊,維度最好是 500 x 500,準備完成後開啟 Unity 建立新專案並儲存場景(名稱自訂),把剛剛的 Logo 圖檔直接拖曳到 Project 視窗會自動加入資源,接著新增一個 GUI Texture (預設是 Unity 圖案),並改名為 LogoGUI ,現在我們替換 LogoGUI 的圖案步驟為

點選  LogoGUI  -> Inspector 視窗中點選 Texture 欄位 -> 選擇剛剛加入的 Logo 資源

LogoGUI 會替換成 Logo 資源的圖案,現在調整  LogoGUI  的尺寸和座標,你可以隨自己的喜好展現不同風格,接著我們開始寫腳本吧,新增腳本並賦予給 Main Camera , 腳本內容為

   1:  #pragma strict
   2:   
   3:  var logoGUI : GameObject ;
   4:   
   5:  var gameFlow : int;
   6:   
   7:  var gameFlow1Time : float;
   8:   
   9:  function Start () 
  10:  {
  11:      logoGUI = GameObject.Find("LogoGUI");
  12:      
  13:      logoGUI.guiTexture.color.a = 0;
  14:      
  15:      gameFlow =0;
  16:      
  17:      gameFlow1Time =0;
  18:  }
  19:   
  20:  function Update () 
  21:  {
  22:      if(gameFlow==0)
  23:      {
  24:          logoGUI.guiTexture.color.a+=0.2*Time.deltaTime;
  25:          
  26:          if(logoGUI.guiTexture.color.a>=0.5)
  27:          {
  28:              gameFlow=1;
  29:          }
  30:      }
  31:      else if(gameFlow==1)
  32:      {
  33:      
  34:          gameFlow1Time+=1*Time.deltaTime;
  35:          
  36:          if(gameFlow1Time>=2)
  37:          {
  38:              gameFlow =2;
  39:          }
  40:          
  41:      }
  42:      else if(gameFlow==2)    
  43:      {
  44:          logoGUI.guiTexture.color.a-=0.2*Time.deltaTime;
  45:          if(logoGUI.guiTexture.color.a<=0)
  46:          {
  47:              
  48:          }
  49:      }
  50:      
  51:  }

開始來一一分析吧
第 1 行 #pragma strict 在這篇有提到,考量效能關係,事實上這行也可以註解掉
第 3 行 var logoGUI : GameObject ; 使用 GameObject 型態的變數 logoGUI ,後面我們將會直接使用這個變數來控制 Logo 的顯示
第 5 行 var gameFlow : int; 變數 gameFlow 控制整個場景的流程,我把流程分為 3 個部分,第 1 個部分為 Logo 的淡入(慢慢出現),此時 gameFlow 等於 0 ,第 2 個部分為 Logo 完全出現後,讓畫面靜止 3 秒, gameFlow 等於 1  ,第 3 個部分為 Logo 的淡出(慢慢消失), gameFlow 會等於 2 , 最後會接下 1 個 scene
第 7 行 var gameFlow1Time : float; 變數 gameFlow1Time 控制 gameFlow 等於 1 時的秒數進行,當秒數進行到 3 秒時,就進入下一流程
第 9 ~ 18 行為初始值的設定
第 11 行使用 GameObject.Find("LogoGUI") 尋找名稱 LogoGUI 的物件並指定給 logoGUI 變數
第 13 行設定  logoGUI 的 alpha 值, alpha 值控制該物件的可視程度,預設為 0.5(完全顯示),我們在一開始把它設定為 0 ,代表場景開始時,看不到這個物件
第 15 行初始 gameFlow 變數等於 0
第 17 行初始  gameFlow1Time 等於 0
第 20 ~ 51 行為 Update 迴圈
第 22 ~ 30 行為第 1 流程,第 24 行 logoGUI.guiTexture.color.a+=0.2 遞增 alpha 值 0.2 單位,至於 *Time.deltaTime 是甚麼意思呢?
簡單的說 Update 方法的執行是每 1 個幀( ㄓㄥˋ) (frame) 就會呼叫 1 次,而每台機器配備效能不同的情況下,完成每個幀的時間也不一樣,舉例來說同樣 100 幀, A 電腦配備比較好,需要 2 秒完成, 相對的 B 電腦配備較差,需要 5 秒完成,這種情況下我們必須以相同的單位當作執行的標準,也就是 *Time.deltaTime ,這個數值代表上一次的幀完成的時間 官網說明,可以印出數值來看看,每 1 次都會變化,代表每個幀完成的時間都不一樣,而乘上Time.deltaTime 可以動態算出上一個幀所必須加減的數值,舉例來說,我們希望 A 變數增加到 10 ,假設第 1 個 frame 完成速度很快,只有 0.01秒,那在該 frame 中就要減少加上的數值可能是 1 ,第 2 個 frame 完成速度較慢,需要0.03秒,第 2 個 frame 就要增加加上的數值可能是 3,動態改變每個 frame 增加的數值就是目的
第 26 ~ 27 行當 alpha 值增加到 0.5 (淡入,完全顯示)之後,進入第 2 流程
第 31 ~ 41 行就是第 2 流程
第 34 行 遞增 gameFlow1Time 變數,大於 2 時進入第 3 流程,我們也乘上 Time.deltaTime ,模擬秒的進行, 在 Start 方法我們初始 gameFlow1Time  為 0,大於 2 就代表經過 3 秒
第 42 ~ 49 行為第 3 流程
第 44 行遞減 alpha 值 0.2 單位(淡出)等到 alpha 值 小於 0 之後(完全消失),我們就進入下 1 個 場景, 至於如何切換場景我們下一篇再說吧~~~

這裡附上範例連結唷

標籤: