Construct 3 製作血條

第一部分，變數

第二部分，文字

第三部分，血條

第四部分，多物件血條

保姆級提示：

在部分案例下方看到“剪貼簿”的程式碼塊，意味著你可以複製它，然後到 Construct 3 編輯器對應的位置貼上，就可以得到和案例相同的例項。若標註是事件表，就到事件表（Event sheet）貼上；若是標註 Sprite 物件，就到場景（Layout） 空白區域貼上。

貼上事件表時，需檢查是否包含必要的物件、變數、外掛。如果缺少和案例相同的物件、變數、外掛等，需要先建立相應的物件才能成功貼上。

第一部分：變數

既然是血條，那麼就需要對應有2個變數屬性，表示當前的數值，以及數值的上限。

1。 HP

2。 MaxHP

管理變數的方法有很多種。

——————————————————

>

> 方式1：全域性變數

——————————————————

你可以直接在事件表初始化全域性變數

這裡簡單演示玩家 “加血” 和 “受傷扣血” 的函式（Function）

事件表剪貼簿：

{“is-c3-clipboard-data”：true，“type”：“events”，“items”：［{“eventType”：“variable”，“name”：“Player_MaxHealth”，“type”：“number”，“initialValue”：“100”，“comment”：“”，“isStatic”：false，“isConstant”：false}，{“eventType”：“variable”，“name”：“Player_Health”，“type”：“number”，“initialValue”：“100”，“comment”：“”，“isStatic”：false，“isConstant”：false}，{“functionName”：“Gain_Health”，“functionDescription”：“”，“functionCategory”：“”，“functionReturnType”：“none”，“functionIsAsync”：false，“functionParameters”：［{“name”：“health”，“type”：“number”，“initialValue”：“0”，“comment”：“”}］，“eventType”：“function-block”，“conditions”：［］，“actions”：［{“id”：“add-to-eventvar”，“objectClass”：“System”，“parameters”：{“variable”：“health”，“value”：“clamp（ Health + health， 0， Player_MaxHealth）”}}］}，{“functionName”：“Player_Hurt”，“functionDescription”：“”，“functionCategory”：“”，“functionReturnType”：“none”，“functionIsAsync”：false，“functionParameters”：［{“name”：“damage”，“type”：“number”，“initialValue”：“0”，“comment”：“”}］，“eventType”：“function-block”，“conditions”：［］，“actions”：［{“callFunction”：“Gain_Health”，“parameters”：［“-damage”］}］}］}

——————————————————

>> 方式2：例項變數

——————————————————

對於一些有大量角色和敵人的遊戲來說，用全域性變數不太適合。所以，我們通常是給物件新增例項變數（Instance variables） 來管理不同的例項。

Sprite 物件剪貼簿

{“is-c3-clipboard-data”：true，“type”：“world-instances”，“items”：［{“type”：“EnemyCollision”，“properties”：{“initially-visible”：true，“initial-animation”：“Animation 1”，“initial-frame”：0，“enable-collisions”：true，“live-preview”：false}，“instanceVariables”：{“HP”：100，“MaxHP”：100}，“behaviors”：{}，“world”：{“x”：436，“y”：464，“width”：32，“height”：32，“originX”：0，“originY”：0。5，“color”：［1，1，1，1］，“angle”：0，“zElevation”：0}}］，“object-types”：［{“name”：“EnemyCollision”，“plugin-id”：“Sprite”，“isGlobal”：false，“instanceVariables”：［{“name”：“HP”，“type”：“number”，“desc”：“”}，{“name”：“MaxHP”，“type”：“number”，“desc”：“”}］，“behaviorTypes”：［］，“effectTypes”：［］，“animations”：{“items”：［{“frames”：［{“width”：250，“height”：250，“originX”：0，“originY”：0。5，“originalSource”：“”，“exportFormat”：“png”，“exportQuality”：0。8，“imageDataIndex”：0，“useCollisionPoly”：true，“duration”：1}］，“name”：“Animation 1”，“isLooping”：false，“isPingPong”：false，“repeatCount”：1，“repeatTo”：0，“speed”：5}］，“subfolders”：［］，“name”：“Animations”}}］，“imageData”：［“data：image/png；base64，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”］}

這樣就可以直接在表示式中透過 Sprite。HP 來引用例項變量了。

事件表剪貼簿

{“is-c3-clipboard-data”：true，“type”：“events”，“items”：［{“eventType”：“block”，“conditions”：［{“id”：“on-created”，“objectClass”：“EnemyCollision”}］，“actions”：［{“id”：“set-instvar-value”，“objectClass”：“EnemyCollision”，“parameters”：{“instance-variable”：“HP”，“value”：“Self。MaxHP”}}］}，{“functionName”：“Enemy_Hurt”，“functionDescription”：“”，“functionCategory”：“”，“functionReturnType”：“none”，“functionIsAsync”：false，“functionParameters”：［{“name”：“enemyUID”，“type”：“number”，“initialValue”：“0”，“comment”：“”}，{“name”：“damage”，“type”：“number”，“initialValue”：“0”，“comment”：“”}］，“eventType”：“function-block”，“conditions”：［{“id”：“pick-by-unique-id”，“objectClass”：“EnemyCollision”，“parameters”：{“unique-id”：“enemyUID”}}］，“actions”：［{“id”：“subtract-from-instvar”，“objectClass”：“EnemyCollision”，“parameters”：{“instance-variable”：“HP”，“value”：“damage”}}］，“children”：［{“eventType”：“block”，“conditions”：［{“id”：“compare-instance-variable”，“objectClass”：“EnemyCollision”，“parameters”：{“instance-variable”：“HP”，“comparison”：3，“value”：“0”}}］，“actions”：［{“id”：“destroy”，“objectClass”：“EnemyCollision”}］}］}］}

——————————————————

>> 方式3：字典

——————————————————

如果你的遊戲資料比較複雜，更推薦用字典（Dictionary）來管理變數。使用字典的好處就是，可以直接透過字串來引用變數，不需要透過事件表的變數列表來選擇，靈活性更強。也方便本地化儲存和匯出。

例如，這裡新建命名為 PlayerData 的字典。顧名思義，就是用來儲存玩家資料的。

然後把字典透過容器（Container） 將角色的物件進行繫結。

容器的作用就是，當角色被建立時，字典也會同時建立。角色被選中時，字典也會同時選中，角色被銷燬時，字典也會同時銷燬。

直接像這樣，引用字典就可以了

clamp（ Self。Get（“Health”） + health， 0， Self。Get（“MaxHealth”））

第二部分：文字

變數解決了，接下來試著將它用 Text 或者 Sprite font 顯示在遊戲畫面中。做個最簡單的血量提示。

——————————————————

>> 步驟1：文字物件

——————————————————

放到合適的位置，就可以到事件表中改變文字內容了。

“HP： ” & Health & “/” & MaxHealth

——————————————————

>> 步驟2：圖層

——————————————————

許多遊戲都會在遊戲畫面顯示一些遊戲資料，它們是固定在畫面邊緣的位置，不會隨著角色的移動而移動。大概就像用一張透明的便籤紙貼在螢幕，然後看電影一樣吧~

新建一個圖層，將文字物件放置在 HUD 層。

圖層屬性，將 Parallax 視差滾動比例設定為 0%

這樣它就不會跟著視角的滾動而滾動了

第三部分：血條

血條，無非就是根據遊戲中的變數來控制圖片的變化。

但是不同的遊戲設計，也有不同的樣式。這裡就簡單舉幾個常見的：

樣式一：純色矩形

只有一張簡單的矩形血條。

可以直接新建一個Sprite，或者 TiledBackground 物件，將影象原點設定在左邊就可以了。然後預估血條的上限寬度，即HP再增加，血條寬度也不會繼續增長的位置。

根據HP的數值設定血條寬度就可以了。

最大寬度 * （HP / MaxHP）

或者

clamp（當前寬度， 最小寬度， 最大寬度）

樣式二：圖片血條

如果你有2張圖，一張是空的血槽，一張是滿的血槽。和上面的樣式不同的是，血條是固定充盈的狀態，已經合併在血槽裡。血量變化時血條不變，而是需要用遮罩來實現血條的變化。

例如像這樣 （素材來源 opengameart。org/lancel ）

最終效果：

所需素材：

1。 血槽

2。 血條

3。 遮罩

——————————————————

>> 步驟1：圖層

——————————————————

這裡還需要新建2個圖層（Layers）

1。 HUD

2。 HUD_Mask

HUD 層在 Mask 層的底部，將血槽。Mask 層放血條和遮罩，遮罩放血條上方。

Mask 層還需要勾選 Force own texture 屬性

——————————————————

>> 步驟2：遮罩物件

——————————————————

用於當作蒙版遮罩的物件，用 TiledBackground 比較方便

將它放置在血條的最右端的位置，

將影象原點（Origin） 設定到右邊（Right）

將混合模式（Blend mode） 設定為

Destination atop

你就可以預覽到這樣的效果了：

然後，記一下遮罩完全遮擋住血條時的寬度。

記一下遮罩完全遮擋住血條時的寬度，這個就是遮罩的最大寬度，表示血條空了。

那麼，血條就完成了一半了。

剩下一半，就是在事件表中實際使用它。

——————————————————

>> 步驟3：事件

——————————————————

既然是血條，那麼就需要對應有2個變數屬性。

1。 HP

2。 MaxHP

然後利用 HP ÷ MaxHP 就可以獲得當前生命值的百分比。

用

遮罩寬度 - 血量百分比 × 遮罩寬度

，就可以了。

240 * （1 - HP / MaxHP）

——————————————————

>> 步驟4：最佳化

——————————————————

用 lerp 來計算插值，可以看起來更加絲滑一些。

lerp（ Self。Width， 240 * （1 - HP / MaxHP）， 0。25）

樣式三：塞爾達心心

塞爾達式單行體力槽

其實，素材只有2個非常小的心

TiledBackground 剪貼簿

{“is-c3-clipboard-data”：true，“type”：“world-instances”，“items”：［{“type”：“Emptyheart”，“properties”：{“initially-visible”：true，“origin”：“top-left”，“wrap-horizontal”：“repeat”，“wrap-vertical”：“repeat”，“image-offset-x”：0，“image-offset-y”：0，“image-scale-x”：1，“image-scale-y”：1，“image-angle”：0}，“instanceVariables”：{}，“behaviors”：{}，“world”：{“x”：48，“y”：136，“width”：100，“height”：20，“originX”：0，“originY”：0，“color”：［1，1，1，1］，“angle”：0，“zElevation”：0}}，{“type”：“Filledheart”，“properties”：{“initially-visible”：true，“origin”：“top-left”，“wrap-horizontal”：“repeat”，“wrap-vertical”：“repeat”，“image-offset-x”：0，“image-offset-y”：0，“image-scale-x”：1，“image-scale-y”：1，“image-angle”：0}，“instanceVariables”：{}，“behaviors”：{}，“world”：{“x”：48，“y”：136，“width”：90，“height”：20，“originX”：0，“originY”：0，“color”：［1，1，1，1］，“angle”：0，“zElevation”：0}}］，“object-types”：［{“name”：“Filledheart”，“plugin-id”：“TiledBg”，“isGlobal”：false，“instanceVariables”：［］，“behaviorTypes”：［］，“effectTypes”：［］，“image”：{“width”：20，“height”：20，“originX”：0。5，“originY”：0。5，“originalSource”：“”，“exportFormat”：“png”，“exportQuality”：0。8，“imageDataIndex”：0，“useCollisionPoly”：true}}，{“name”：“Emptyheart”，“plugin-id”：“TiledBg”，“isGlobal”：false，“instanceVariables”：［］，“behaviorTypes”：［］，“effectTypes”：［］，“image”：{“width”：20，“height”：20，“originX”：0。5，“originY”：0。5，“originalSource”：“”，“exportFormat”：“png”，“exportQuality”：0。8，“imageDataIndex”：1，“useCollisionPoly”：true}}］，“imageData”：［“data：image/png；base64，iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAIJJREFUOE/t1M0NgCAMBeAykfM4IfM4kYRDSWlLfwzc9GZ4+SCPaoHNT9nswXmwwvXSU9/wTJt662YYYUQ5xtf7+wBX4WjHuOkPRhuTOdFhj3y9GDpaYrCzKJ9T9UuJohyb5pC34qEaZoJWpyvMBTXUwkIgRT0sDGam8/z/MHMaLdsA/YMwFf+qzF4AAAAASUVORK5CYII=”，“data：image/png；base64，iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAItJREFUOE/llMENgDAIRelEzuOEzuNEGg4YpMCnSXswemki9PUX+G00+WuTebQeeNB2adU7na9DUbxL9gDyj2FZnIU8QC9ZlIoqC9NxiZWAqHFazJ+BXKesMVEd7Z5usEegXq7rlAo0ygmth+YymsnUyxVn2NrCx0FDK6WAQOk+r9E1tcoSEFnvW8AbcB1aFWkUakgAAAAASUVORK5CYII=”］}

用的還是 Tiled Background

看到這個，就明白血條如何變化的吧

例如，一顆紅心的尺寸是 20，那隻需要把它們放在相同的位置，然後把紅心的寬度延長就可以了~

20 * health

樣式四：圓形圓環

圓環型體力槽