このコースでは、アクションゲームメーカーでのスクリプトの基礎を学びます。
この第4回では、HPバーUIを作成します。
前提条件
前のチュートリアル（#1〜#3）で使用したプロジェクトを続けます。
プロジェクトを開いて準備を整えてください。
ステップ 1: プレイヤーの調整
Object_Sampleplayerを開きます。BaseSettingsを開き、HP と Max HP を20に設定し、Blink Duration を0.1 秒に設定します。これにより、点滅エフェクトを追加して無敵状態をより目立たなくします。
- 次に、新しいノード
TakenDamageSettingsを追加します。
TakenDamageSettingsでは多くの設定が可能ですが、今回は ダメージボイス を追加するために使用します。
新しいダメージ設定を作成し、Other Settingsで Play Sound を有効にし、サウンドをmale_1_1_Aに設定します。
- ゲームをテストします。プレイヤーはダメージを受けた際に点滅し、ボイスが再生されるはずです。ただし、プレイヤーとゾンビが互いに押し合いしているため、これを修正します。
Playerノードを選択し、Collision > Collision Layerを1から2に変更します。
レイヤーはオブジェクトが属する物理レイヤーを定義し、マスクはどのレイヤーと衝突するかを定義します。
ゾンビは レイヤー 2 / マスク 1 を使用しているため、プレイヤーを レイヤー 2 にすることで、互いに衝突しなくなります。- (CollisionLayer/CollisionMaskの詳細は別マニュアルで説明しています。)*
- これで、20 HP を持ち、敵から 1 ダメージ を受けた後に 1 秒間無敵 になるキャラクターが完成しました。
備考
TakenDamageSettings でできること
Attack Settings で設定した攻撃属性に基づいてダメージ倍率を調整できます。これは弱点や耐性の設定に役立ちます。
また、大きなダメージを受けた際にゲームが一時的にスローモーションになるような「ヒットストップ」の設定も可能です。
ステップ 2: HP バーの作成
gamesceneタブを開き、UIを選択します。
- 新しいノードを追加します:
ImageGauge。
常に表示され、カメラのスクロールの影響を受けない UI 要素は、すべてUIの下に配置してください。
ImageGaugeのプロパティを以下のように設定します:
Current Value をsampleplayer.hpに、Max Value をsampleplayer.max_hpに設定します。
Object_Sampleplayer.tscnはsampleobjectフォルダにあります。
- 次に、
ImageGauge内のTextureProgressBarのプロパティを設定します。
Nine Patch Stretch を有効にし、Left Limit と Right Limit を10pxに設定します。
これにより、バーの比率を崩さずにサイズ変更が可能になります。
ImageGaugeのテクスチャを設定します。
templates > objects > ui > interface > variation_02_Ornateから画像を使用します:
- Under:
I_002_hp_horizontal_02.png - Progress:
I_002_hp_horizontal_03.png
ImageGaugeのサイズを調整します。
青枠で囲まれた領域が UI 表示領域です。ゲージをお好みのサイズに拡大縮小してください。
- ゲームをテストします。
正しく設定されていれば、HP は白いバーとして表示され、ゾンビに攻撃されると減少します。 - 次に、枠を追加します。
ImageGaugeの下に新しいノードを追加します:NinePatchRect。
このノードは、Nine Patch 設定を使用して、比率を維持しながら伸縮する矩形を作成します。
NinePatchRectのテクスチャをI_002_hp_horizontal_01.pngに設定し、Edit Regionボタンをクリックします。
- Nine Patch エディタが開きます。
画像に示されているように、黒と白のバー（実線の白い線ではない部分）を調整します。
- サイズを変更し、HP バーの上に配置します。
- HP バーの完成です！
注意事項
バーの種類
ImageGauge の Fill Mode を変更することで、垂直や円形のゲージなど、さまざまな種類のバーを作成できます。
Tint プロパティを使用して、バーの色を変更することも可能です。
Nine Patch について
Nine Patch は、画像を 9 つの領域に分割し、歪みを避けるために比例して伸縮させる技術です。
この方法は、メッセージウィンドウなどの作成にも役立ちます。
次の講座: パート 5
「いいね！」 2