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

[GGG-Administrator]

このコースでは、ACTION GAME MAKERでの基本的なスクリプト作成方法を学んでいきます。
第四回では、HPバーのUIを作っていきます。

コース開始の事前準備

第一回～第三回で使用したプロジェクトを引き続き利用します。
それではプロジェクトを開いて準備してください。

[GGG-Administrator]

STEP1: プレイヤーを調整しよう。

1. Object_Sampleplayerを開いてください。
2. BaseSettingsを開き、HPとMax HPを20にして点滅間隔(BlinkDuration)を0.1秒とします。これで無敵時間中は点滅するようになりわかりやすくなりました。
   
   
3. 続いて、新しいノードTakenDamageSettingsを追加してください。
   
   
4. TakenDamageSettingsでは様々な設定を行うことができますが、今回はダメージボイスを入れるためだけに使います。新しいダメージ設定を作成し、OtherSettingsの音を再生をオンとして、male_1_1_Aを設定してください。
   
   
5. テストプレイをしてください。敵にあたるとダメージボイスを出して点滅するはずですが、プレイヤーとゾンビがお互いを押してしまうようですのでこれを解決しましょう。
6. Playerノードを選択してください。Collision>CollisionLayerを1から2に変更してください。Layerは自身が所属する物理レイヤー、Maskは衝突するレイヤーを示します。ゾンビはLayer2、Mask1となっているので、プレイヤーをLayer2とすることでお互いに衝突しなくなります。 *CollisionLayer/CollisionMaskについては別途マニュアルにて詳しく説明します。
   
   
7. これで、敵にあたると1ダメージを受けて1秒間無敵になるHP20のキャラクターとなりました。

解説

TakenDamageSettingsでできること。
攻撃設定で設定できる特定の属性の攻撃を受けた時のダメージ倍率等を設定できます。つまり弱点や耐性を設定するのに有用です。また、ヒットストップも設定できるので大ダメージを受けたらしばらくスローになる、なども設定できます。

[GGG-Administrator]

STEP2: HPバーを作ろう。

1. gamesceneタブを開き、UIを選択してください。
   

   

2. 新しいノード、ImageGaugeを追加します。UI等のカメラのスクロールに影響されず、常に表示したいオブジェクトはUIノード下に作成していきます。
   

   

3. ImageGaugeプロパティについて以下のように設定します。現在値としてsampleplayerのhp、最大値としてsampleplayerのmax_hpを設定します。なお、Object_Sampleplayer.tscnはsampleobjectフォルダにあります。
   

   
   
   5.引き続きImageGaugeのTextureProgressBarのプロパティを設定します。Nine Patch Stretchを有効にして、Left Limit:10px, Right Limit:10pxと設定しましょう。これで、作成するバーの比率を壊すことなく拡大縮小ができるようになります。
   
   

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 シーン遷移を作ってみよう。

このコースでは、ACTION GAME MAKERでの基本的なスクリプト作成方法を学んでいきます。 第五回では、シーン遷移を作っていきます。 コース開始の事前準備 第一回～第四回で使用したプロジェクトを引き続き利用します。 それではプロジェクトを開いて準備してください。