チュートリアル: スクリプトコース#4 UIを作ってみよう。

ACTION GAME MAKER OfficialTutorial/チュートリアル
,
3

STEP2: HPバーを作ろう。

  1. gamesceneタブを開き、UI>UIObjectRootを選択してください。
  2. 新しいノード、ImageGaugeを追加します。UI等のカメラのスクロールに影響されず、常に表示したいオブジェクトはUIObjectRoot下に作成していきます。
    image
    image902×351 12.8 KB
  3. ImageGaugeプロパティについて以下のように設定します。現在値としてsampleplayerのhp、最大値としてsampleplayerのmax_hpを設定します。なお、Object_Sampleplayer.tscnはsampleobjectフォルダにあります。
    image
    image443×276 21.7 KB

    4.引き続きImageGaugeのTextureProgressBarのプロパティを設定します。Nine Patch Stretchを有効にして、Left Limit:10px, Right Limit:10pxと設定しましょう。これで、作成するバーの比率を壊すことなく拡大縮小ができるようになります。
    image
    image431×245 13.8 KB
  4. ImageGaugeのテクスチャーを設定します。ファイルシステムのtemplates>objects>ui>interface>variation_02_Ornateにある画像を使いましょう。UnderにI_002_hp_horizontal_02.png、ProgressにI_002_hp_horizontal_03.pngを設定してください。
    image
    image423×287 9.54 KB
  5. ImageGaugeのサイズを調整しましょう。青い枠に囲まれた部分がUI表示領域ですので、お好みのサイズに拡大してください。
    image
    image1104×634 50.2 KB
  6. テストプレイをしてみましょう。うまく設定できていればHPが白いバーで表示され、ゾンビにあたると削れていくはずです。
  7. 最後に枠をつけましょう。ImageGaugeの子として新しいノードNinePatchRectを追加してください。これはNinePatchStrechが有効な四角形を作成するノードです。
    image
    image750×238 8.94 KB
  8. NinePatchRectのTextureとしてI_002_hp_horizontal_01.pngを適用し、EditRegionボタンを押してください。
    image
    image451×270 10.3 KB
  9. NinePatchの作成画面がでますので、白黒のバーを動かして画像のように設定してください。白い実線の方ではありません。
    image
    image962×572 14.7 KB
  10. 拡大してHPバーの上に重ねましょう。
    image
    image819×264 29.6 KB
  11. HPバーの完成です。

解説

バーのタイプ
ImageGaugeのFillModeを変えることで様々なタイプのバーを作ることができます。縦型のバーや円形のバーも作成可能です。
なお、Tintプロパティで各バーの色を変更することも可能です。

Nine Patchについて
画像を9分割し、分割場所に応じて拡大率を変えることで比率が崩れないようにする技術です。メッセージウィンドウ等でも利用できます。

第5回はこちら