# チュートリアル: スクリプトコース #4 — UIを作成しよう
**URL:** https://guild.rpgmakerofficial.com/t/topic/62
**Category:** チュートリアル
**Tags:** tutorial, english
**Created:** [2025 年 6 月 6 日午前 7:21 UTC](https://guild.rpgmakerofficial.com/t/topic/62 "2025-06-06T07:21:03Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@GGG-Administrator](https://guild.rpgmakerofficial.com/u/GGG-Administrator)
#### Post date: [2025 年 6 月 6 日午前 7:21 UTC](https://guild.rpgmakerofficial.com/t/topic/62/1 "2025-06-06T07:21:03Z")
このコースでは、 **アクションゲームメーカー** でのスクリプトの基礎を学びます。
この第4回では、 **HPバーUI** を作成します。
* * *
## 前提条件
前のチュートリアル（#1〜#3）で使用したプロジェクトを続けます。
プロジェクトを開いて準備を整えてください。
---
### Author:  [@GGG-Administrator](https://guild.rpgmakerofficial.com/u/GGG-Administrator)
#### Post date: [2025 年 6 月 6 日午前 7:21 UTC](https://guild.rpgmakerofficial.com/t/topic/62/2 "2025-06-06T07:21:54Z")
## ステップ 1: プレイヤーの調整
1. `Object_Sampleplayer` を開きます。
2. `BaseSettings` を開き、 **HP** と **Max HP** を `20` に設定し、 **Blink Duration** を `0.1 秒` に設定します。これにより、点滅エフェクトを追加して無敵状態をより目立たなくします。
3. 次に、新しいノード `TakenDamageSettings` を追加します。
4. `TakenDamageSettings` では多くの設定が可能ですが、今回は **ダメージボイス** を追加するために使用します。
新しいダメージ設定を作成し、`Other Settings` で **Play Sound** を有効にし、サウンドを `male_1_1_A` に設定します。
5. ゲームをテストします。プレイヤーはダメージを受けた際に点滅し、ボイスが再生されるはずです。ただし、プレイヤーとゾンビが互いに押し合いしているため、これを修正します。
6. `Player` ノードを選択し、`Collision > Collision Layer` を `1` から `2` に変更します。
レイヤーはオブジェクトが属する物理レイヤーを定義し、マスクはどのレイヤーと衝突するかを定義します。
ゾンビは **レイヤー 2 / マスク 1** を使用しているため、プレイヤーを **レイヤー 2** にすることで、互いに衝突しなくなります。
7. (CollisionLayer/CollisionMaskの詳細は別マニュアルで説明しています。)\*
8. これで、 **20 HP** を持ち、敵から **1 ダメージ** を受けた後に **1 秒間無敵** になるキャラクターが完成しました。
* * *
### 備考
**TakenDamageSettings でできること**
Attack Settings で設定した攻撃属性に基づいてダメージ倍率を調整できます。これは弱点や耐性の設定に役立ちます。
また、大きなダメージを受けた際にゲームが一時的にスローモーションになるような「ヒットストップ」の設定も可能です。
---
### Author:  [@GGG-Administrator](https://guild.rpgmakerofficial.com/u/GGG-Administrator)
#### Post date: [2025 年 6 月 6 日午前 7:22 UTC](https://guild.rpgmakerofficial.com/t/topic/62/3 "2025-06-06T07:22:38Z")
## ステップ 2: HP バーの作成
1. `gamescene` タブを開き、`UI` を選択します。
2. 新しいノードを追加します: `ImageGauge`。
常に表示され、カメラのスクロールの影響を受けない UI 要素は、すべて `UI` の下に配置してください。
3. `ImageGauge` のプロパティを以下のように設定します:
**Current Value** を `sampleplayer.hp` に、 **Max Value** を `sampleplayer.max_hp` に設定します。
`Object_Sampleplayer.tscn` は `sampleobject` フォルダにあります。
4. 次に、`ImageGauge` 内の `TextureProgressBar` のプロパティを設定します。
**Nine Patch Stretch** を有効にし、 **Left Limit** と **Right Limit** を `10px` に設定します。
これにより、バーの比率を崩さずにサイズ変更が可能になります。
5. `ImageGauge` のテクスチャを設定します。
`templates > objects > ui > interface > variation_02_Ornate` から画像を使用します:
- Under: `I_002_hp_horizontal_02.png`
- Progress: `I_002_hp_horizontal_03.png`
1. `ImageGauge` のサイズを調整します。
青枠で囲まれた領域が UI 表示領域です。ゲージをお好みのサイズに拡大縮小してください。
2. ゲームをテストします。
正しく設定されていれば、HP は白いバーとして表示され、ゾンビに攻撃されると減少します。
3. 次に、枠を追加します。
`ImageGauge` の下に新しいノードを追加します: `NinePatchRect`。
このノードは、Nine Patch 設定を使用して、比率を維持しながら伸縮する矩形を作成します。
4. `NinePatchRect` のテクスチャを `I_002_hp_horizontal_01.png` に設定し、`Edit Region` ボタンをクリックします。
5. Nine Patch エディタが開きます。
画像に示されているように、 **黒と白のバー** （実線の白い線ではない部分）を調整します。
6. サイズを変更し、HP バーの上に配置します。
7. HP バーの完成です！
* * *
## 注意事項
**バーの種類**
`ImageGauge` の `Fill Mode` を変更することで、垂直や円形のゲージなど、さまざまな種類のバーを作成できます。
`Tint` プロパティを使用して、バーの色を変更することも可能です。
**Nine Patch について**
Nine Patch は、画像を 9 つの領域に分割し、歪みを避けるために比例して伸縮させる技術です。
この方法は、メッセージウィンドウなどの作成にも役立ちます。
📘 **次の講座: パート 5**
> [@Tutorial: Script Course #5 - Let’s Create Scene Transitions](https://guild.rpgmakerofficial.com/t/topic/63?u=ggg-administrator):
>
> In this course, you will learn the basics of scripting in ACTION GAME MAKER. In Part 5, we will create scene transitions. Preparation Before Starting the Course You will continue using the same pro…