血條(Health Bar)的預製設計

血條(Health Bar)的預製設計

具體要求如下

  • 分別使用 IMGUI 和 UGUI 實現
  • 使用 UGUI,血條是遊戲對象的一個子元素,任何時候需要面對主攝像機
  • 分析兩種實現的優缺點
  • 給出預製的使用方法

分析兩種實現的優缺點

IMGUI

IMGUI(Immediate Mode GUI)及時模式圖形界面。它是代碼驅動的 UI 系統,沒有圖形化設計界面,只能在 OnGUI 階段用 GUI 系列的類繪製各種 UI 元素,因此 UI元素只能浮在遊戲界面之上。

IMGUI 的存在符合遊戲編程的傳統,即使在今天它依然沒有被官方宣判爲遺留系統(Legacy Systems)。在修改模型,渲染模型這樣的經典遊戲循環編程模式中,在渲染階段之後,繪製 UI 界面無可挑剔。這樣的編程即避免了 UI 元素保持在屏幕最前端,又有最佳的執行效率,一切控制掌握在程序員手中。

按 Unity 官方說法,IMGUI 主要用於以下場景:

  • 在遊戲中創建調試顯示工具
  • 爲腳本組件創建自定義的 Inspector 面板。
  • 創建新的編輯器窗口和工具來擴展 Unity 環境。

IMGUI系統通常不打算用於玩家可能使用並與之交互的普通遊戲內用戶界面。爲此,應該使用 Unity 的基於 GameObject 的 UGUI 系統。

優勢
  • 代碼主導,能夠有效控制
  • 擴展性強
  • 能夠快速創建簡單工具
  • 執行效率高
劣勢
  • 需要一定的代碼基礎
  • 開發效率低,難以調試
UGUI
優勢:
  • 所見即所得(WYSIWYG)設計工具
  • 支持多模式、多攝像機渲染
  • 面向對象的編程
劣勢:
  • 對於簡單操作而言工作量大
  • 擴展性低
  • 調試困難,不易修改
  • 難以和設計模式結合

IMGUI實現

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class IMGUI : MonoBehaviour {
	private float hSliderValue = 75f;
    private void OnGUI()
    {
        Vector3 worldPos = new Vector3(transform.position.x, transform.position.y, transform.position.z);
        Vector2 screenPos = Camera.main.WorldToScreenPoint(worldPos);
        hSliderValue = GUI.HorizontalSlider (new Rect(screenPos.x -50,screenPos.y,100,100), hSliderValue, 0.0f, 100.0f);
    }
}

實現效果如下

在這裏插入圖片描述

UGUI實現

  • 菜單 Assets -> Import Package -> Characters 導入資源
  • 在層次視圖,Context 菜單 -> 3D Object -> Plane 添加 Plane 對象
  • 資源視圖展開 Standard Assets :: Charactors :: ThirdPersonCharater :: Prefab
  • 將 ThirdPersonController 預製拖放放入場景,改名爲 Ethan
  • 設置屬性
    • Plane 的 Transform 的 Position = (0,0,0)
    • Ethan 的 Transform 的 Position = (0,0,0)
    • Main Camera 的 Transform 的 Position = (0,1,-10)
  • 選擇 Ethan 用上下文菜單 -> UI -> Canvas, 添加畫布子對象
  • 選擇 Ethan 的 Canvas,用上下文菜單 -> UI -> Slider 添加滑條作爲血條子對象
  • 選擇 Ethan 的 Canvas,在 Inspector 視圖
  • 設置 Canvas 組件 Render Mode 爲 World Space
  • 設置 Rect Transform 組件 (PosX,PosY,Width, Height) 爲 (0,2,160,20)
  • 設置 Rect Transform 組件 Scale (x,y) 爲 (0.01,0.01)

效果如下
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章