# チュートリアル: 【Godotモード】スクリプトコース#4 UIを作ってみよう。 **URL:** https://guild.rpgmakerofficial.com/t/topic/50 **Category:** チュートリアル **Tags:** 日本語, tutorial **Created:** [2025 年 6 月 4 日午前 6:52 UTC](https://guild.rpgmakerofficial.com/t/topic/50 "2025-06-04T06:52:56Z") **Posts on this page:** 1 **Showing post:** 3
### Author: ![GGG-Administrator](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/ggg-administrator/32/6_2.png) [@GGG-Administrator](https://guild.rpgmakerofficial.com/u/GGG-Administrator) #### Post date: [2025 年 6 月 4 日午前 8:20 UTC](https://guild.rpgmakerofficial.com/t/topic/50/3 "2025-06-04T08:20:11Z")
## STEP2: HPバーを作ろう。 1. gamesceneタブを開き、UIを選択してください。 2. 新しいノード、ImageGaugeを追加します。UI等のカメラのスクロールに影響されず、常に表示したいオブジェクトはUIノード下に作成していきます。 3. ImageGaugeプロパティについて以下のように設定します。現在値としてsampleplayerのhp、最大値としてsampleplayerのmax\_hpを設定します。なお、Object\_Sampleplayer.tscnはsampleobjectフォルダにあります。 4. ImageGaugeのテクスチャーを設定します。ファイルシステムのtemplates\>objects\>ui\>interface\>variation\_02\_Ornateにある画像を使いましょう。UnderにI\_002\_hp\_horizontal\_02.png、ProgressにI\_002\_hp\_horizontal\_03.pngを設定してください。 5. ImageGaugeのサイズを調整しましょう。青い枠に囲まれた部分がUI表示領域ですので、お好みのサイズに拡大してください。 6. テストプレイをしてみましょう。うまく設定できていればHPが白いバーで表示され、ゾンビにあたると削れていくはずです。 7. 最後に枠をつけましょう。ImageGaugeの子として新しいノードNinePatchRectを追加してください。これはNinePatchStrechが有効な四角形を作成するノードです。 8. NinePatchRectのTextureとしてI\_002\_hp\_horizontal\_01.pngを適用し、EditRegionボタンを押してください。 9. NinePatchの作成画面がでますので、 **白黒のバー** を動かして画像のように設定してください。 **白い実線の方ではありません。** 10. 拡大してHPバーの上に重ねましょう。 11. HPバーの完成です。 ## 解説 **バーのタイプ** ImageGaugeのFillModeを変えることで様々なタイプのバーを作ることができます。縦型のバーや円形のバーも作成可能です。 なお、Tintプロパティで各バーの色を変更することも可能です。 **Nine Patchについて** 画像を9分割し、分割場所に応じて拡大率を変えることで比率が崩れないようにする技術です。メッセージウィンドウ等でも利用できます。 第5回はこちら > [@チュートリアル: スクリプトコース#5 シーン遷移を作ってみよう。](https://guild.rpgmakerofficial.com/t/topic/51): > > このコースでは、ACTION GAME MAKERでの基本的なスクリプト作成方法を学んでいきます。 第五回では、シーン遷移を作っていきます。 コース開始の事前準備 第一回～第四回で使用したプロジェクトを引き続き利用します。 それではプロジェクトを開いて準備してください。 --- _[View the full topic](https://guild.rpgmakerofficial.com/t/topic/50)._