最簡單的一種方式——就是在對應的player的遊戲物件建立Canvas/進而建立Silder(有個坑，建議先行建立好Canvas(先調整引數)/Slider後)整體縮放Canvas大小到需要的位置即可，不然再該畫布下的內容會錯亂，無法正常顯示下面就是引數:

後續再給出專案原始檔(存在一個問題，旋轉父物體後，當前的Canvas也會跟著旋轉，需要寫指令碼更新旋轉角度)

還有其他的實現方式:

第一種： 把Canvas畫布作為Player的子物體。

首先：佈置一下場景，簡單的地面和一個膠囊人物。。碰撞器剛體材質燈光什麼的都加上，最後就變成了這樣。

然後在Player上寫一個指令碼來控制人物的移動，程式碼很簡單，如下：

<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">public</span> <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">float</span> speed = <span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">10</span>f;
	<span class="hljs-function" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; background-color: transparent; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">void</span> <span class="hljs-title" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(25, 70, 157); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">FixedUpdate</span> <span class="hljs-params" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(0, 0, 255); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">()</span>
	</span>{
	    <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">float</span> h = Input.GetAxisRaw(<span class="hljs-string" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(33, 145, 97); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">"Horizontal"</span>) * speed * Time.deltaTime;
	    <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">float</span> v = Input.GetAxisRaw(<span class="hljs-string" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(33, 145, 97); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">"Vertical"</span>) * speed * Time.deltaTime;
	    rigidbody.MovePosition(transform.position + <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">new</span> Vector3(h, <span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">0</span>, v));
	}
 

這樣我們就把基本的佈置都做好了，接下來就開始我們的血條製作。

第一種方案：

在Player下建立一個Canvas畫布，然後在Canvas中建立一個Slider作為我們的血條。。把slider下面的Background和Handle Slide Area刪除掉或者禁用掉。像我這樣（灰色表示禁用）

這裡我們忽略了一個最重要的東西，就是必須把Canvas的渲染模式選擇WorldSpace，然後把相機新增進去，這是最重要最關鍵的一步

通過上面的步驟，我們已經完成了，最後的步驟就是修改修改畫布的大小與位置就行了，把畫布拖到人物頭頂就OK，大功告成！

第二種，相比第一種也很簡單

大概原理是：把Player的世界座標轉為螢幕座標，血條座標就等於Player的螢幕座標加上Player中心點到頭頂的差值

首先建立Canvas（注意這裡的Canvas不要作為Player的子物體）並建立Slider，並且把slider下面的Background和Handle Slide Area刪除掉或者禁用掉。大概佈局就是這樣！

具體血條製作也跟上篇相似，這裡不多講。效果如圖

在Player身上加一個Follow指令碼，在Player身上加指令碼而不在slider身上加指令碼的原因是我想讓血條超出螢幕就關閉顯示，這樣對優化有好處

指令碼也很簡單，幾行程式碼就能實現一個很炫酷的功能：

<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">public</span> <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">float</span> xOffset;
    <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">public</span> <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">float</span> yOffset;
    <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">public</span> RectTransform recTransform;

	<span class="hljs-function" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; background-color: transparent; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">void</span> <span class="hljs-title" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(25, 70, 157); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">Update</span> <span class="hljs-params" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(0, 0, 255); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">()</span>
	</span>{
        Vector2 player2DPosition = Camera.main.WorldToScreenPoint(transform.position);
	    recTransform.position = player2DPosition + <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">new</span> Vector2(xOffset, yOffset);

        <span class="hljs-comment" style="border: 0px; margin: 0px; padding: 0px; font-style: italic; font-family: inherit; vertical-align: baseline; color: rgb(64, 128, 128); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">//血條超出螢幕就不顯示</span>
        <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">if</span> (player2DPosition.x > Screen.width || player2DPosition.x < <span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">0</span> || player2DPosition.y > Screen.height || player2DPosition.y < <span class="hljs-number" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(64, 160, 112); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">0</span>)
	    {
            recTransform.gameObject.SetActive(<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">false</span>);
	    }
	    <span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">else</span>
	    {
            recTransform.gameObject.SetActive(<span class="hljs-keyword" style="border: 0px; margin: 0px; padding: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(149, 65, 33); background-color: transparent; background-position: initial initial; background-repeat: initial initial;">true</span>);
	    }
	}