前回から連載をはじめたRPG戦闘シーンのScratchプログラミングですが、複雑なプログラムなのでテーマやテクニック別に区切って解説しています。
RPGには「フィールド画面」と「バトル画面」がありますが、その内のバトル画面のプログラミングの紹介になっています。
今回は第2回目として、画面下部にあるステータスバーにキャラクターの状態（HPやMP）と攻撃パターンやアイテムを選択するコマンドを配置するプログラムについて説明します。
このプログラムで使用する画像や音声は、これまでの記事でもたびたび紹介している『無料で使えるスーパーパワーアセットパック(CC0)』にRPGの戦闘シーン向けの素材があるので、それを使用しています。
この記事では、ロールプレイングゲーム（RPG）の戦闘シーンにおけるキャラクターのHP／MPとコマンドアイコンを配置する方法について紹介します。
プレーヤーが操作するキャラクターが、架空のキャラクターの役割を演じることによって成長しながらストーリーが展開していくことを特徴とするゲームジャンルのこと。一般的にはモンスターとの戦闘などの試練（冒険、難題、探索、戦闘など）を乗り越えて目的の達成を目指すゲームである。略してRPGともいう。1986年に第1作が発売された「ドラゴンクエスト」シリーズが大ヒットしたことにより、コンピュータゲームの大きなジャンルとして定着した。
完成品
この章の内容をご自身のScratch環境に反映すれば、同じ動きを再現することができます。
完成した動き（この記事のゴール）
ステージ下部にある黒い帯の部分（ステータスバー）にキャラクターごとのHP（ヒットポイント）やMP（マジックポイント）、それと選択可能なコマンドアイコンを配置しています。
中央部はキャラクターの顔アイコンとHPの表示です。分母は最大値999、分子にHPの残数を表示しています。
右側には最大値を100としてMPをバーで表示するようにしています。
左側にはコマンドアイコンを2行3列に並べて配置しています。上段の3つが攻撃系のコマンド、下段が左から「防御」「逃走」「道具」に相当するコマンドです。
今回はステータスバーにそれぞれの情報を表示するプログラムまで（HPやMPの増減、コマンド選択は未実装）ですが、出来るだけ短いプログラムになるようにクローンや定義ブロックを多く使って作っています。
完成した動き（最終形態）
最終形のイメージをつかんでもらうために、すべてのプログラムを結合して実装した最終形態のアニメーションの序盤部分を載せておきます。GIF画像なので音声は聞こえませんが、実際にプレイするとBGMが流れます。
使用したスプライト
スプライトは「初期設定」「背景」「ステータスバー」「warrior2」「Wizard」「bowman」「giant」「mushroom」「mimic」「フェイス」「HPMP文字」「HP数字」「P_MPゲージ枠」「P_MPゲージ」「コマンドアイコン」の15個です。
アクションゲーム用の背景・キャラクター・アイテム等の画像や音声は、パブリックドメインである「スーパーパワーアセットパック（CC0）のrpg-battle-system」を使っています。
以前の記事で説明済みのスプライトは、過去記事へのリンクを表示しています。
【初期設定のスプライト】
「初期設定」スプライトはプログラム専用なのでコスチュームはありません。
【背景のスプライト】
こちらの記事を参照してください↓↓↓（※リンクをクリックすると対象の箇所まで飛びます）
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション（Tips）
【ステータスバーのスプライト】
こちらの記事を参照してください↓↓↓（※リンクをクリックすると対象の箇所まで飛びます）
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション（Tips）
【warrior2のスプライト】
こちらの記事を参照してください↓↓↓（※リンクをクリックすると対象の箇所まで飛びます）
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション（Tips）
【Wizardのスプライト】
こちらの記事を参照してください↓↓↓（※リンクをクリックすると対象の箇所まで飛びます）
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション（Tips）
【bowmanのスプライト】
こちらの記事を参照してください↓↓↓（※リンクをクリックすると対象の箇所まで飛びます）
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション（Tips）
【giantのスプライト】
こちらの記事を参照してください↓↓↓（※リンクをクリックすると対象の箇所まで飛びます）
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション（Tips）
【mushroomのスプライト】
こちらの記事を参照してください↓↓↓（※リンクをクリックすると対象の箇所まで飛びます）
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション（Tips）
【mimicのスプライト】
こちらの記事を参照してください↓↓↓（※リンクをクリックすると対象の箇所まで飛びます）
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション（Tips）
【フェイスのスプライト】
「フェイス」スプライトは、それぞれのキャラクターのフォルダにある「faceset.png」ファイルをコスチュームにアップロードして使用します。
下の図は「warrior2」の例ですので、「Wizard」と「bowman」についても同様に画像ファイルを探してアップロードします。
コスチューム名は、それぞれのキャラクターのスプライト名と同じ（warrior2 / Wizard / bowman）にしておきます。（ここで付けた名前はあとでプログラムの中で使用します）
【HPMP文字のスプライト】
「HPMP文字」スプライトは、「rpg-battle-system」フォルダにある「font-16×16.png」ファイルを使用します。
このファイルは16×16ピクセルサイズの英数字や記号のロゴが横15文字・縦8文字分が一枚の画像ファイルに詰め込まれているので、「PL_ImageConstructor.exe（Windows用フリーソフト）」のような画像編集ソフトを使って縦横等間隔に分割してからコスチュームにアップロードして使用します。
このスプライトでは、分割したロゴのうち「H・M・P」の英字ロゴのみ使用します。また、下の図のようにロゴとコスチューム名は一致させておきます。
【HP数字のスプライト】
「HP数字」スプライトは、「HPMP文字」スプライトと同様に「rpg-battle-system」フォルダにある「font-16×16.png」ファイルを分割してから使用します。
使用する文字は「／(スラッシュ)」と「0」～「9」の数字のロゴだけです。ロゴとコスチューム名は一致させておきます。
【P_MPゲージ枠のスプライト】
「P_MPゲージ枠」スプライトは、「rpg-battle-system\HUD\bar」フォルダにある「background.png」ファイルを使用します。
【P_MPゲージのスプライト】
「P_MPゲージ」スプライトは、「rpg-battle-system\HUD\bar」フォルダにある「green.png」ファイルと「red.png」ファイルを加工した画像を使用します。
「red.png」画像は、下の図のように横の長さを「90, 80, 70, 60, 50, 40, 30, 20, 10, 0」と10ずつ異なったサイズにします。横幅0のコスチュームは画像を完全に消しています。
そしてコスチューム名にも横幅が分かるように「red90, red80, ・・・」のように名前を付けます。この名前はプログラムの中で使うので法則性のある名前をつける必要があります。
【コマンドアイコンのスプライト】
「コマンドアイコン」スプライトは、「rpg-battle-system\HUD」フォルダにある「icon.png」ファイルを分割して使用します。
このファイルは40×40ピクセルサイズのアイコンが横10個・縦4個分が一枚の画像ファイルに詰め込まれているので、「PL_ImageConstructor.exe（Windows用フリーソフト）」のような画像編集ソフトを使って縦横等間隔に分割してからコスチュームにアップロードして使用します。
分割した画像のうち、攻撃・防御・アイテムなどにふさわしい画像を選んでコスチュームにアップロードします。
コスチューム名は下の図のように「attack」「attack2」「defence」「magic」「escape」「item」とします。この名前はプログラムの中でも使います。
完成したスクリプト
完成したスクリプトの全体です。
以前の記事で説明済みのスクリプトは、過去記事へのリンクを表示しています。
【初期設定のスクリプト】
前回の内容で完成しているので省略します。（※リンクをクリックすると対象の箇所まで飛びます）
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション（Tips）
【背景のスクリプト】
前回の内容で完成しているので省略します。（※リンクをクリックすると対象の箇所まで飛びます）
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション（Tips）
【ステータスバーのスクリプト】
前回の内容で完成しているので省略します。（※リンクをクリックすると対象の箇所まで飛びます）
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション（Tips）
【warrior2のスクリプト】
今回は解説のテーマではないので省略します。
【Wizardのスクリプト】
今回は解説のテーマではないので省略します。
【bowmanのスクリプト】
今回は解説のテーマではないので省略します。
【giantのスクリプト】
今回は解説のテーマではないので省略します。
【mushroomのスクリプト】
今回は解説のテーマではないので省略します。
【mimicのスクリプト】
今回は解説のテーマではないので省略します。
【フェイスのスクリプト】
- i：このスプライトのみ
- プレイヤー種類：すべてのスプライト用
【HPMP文字のスクリプト】
- i：このスプライトのみ
【HP数字のスクリプト】
- i：このスプライトのみ
- k：このスプライトのみ
- warrior2のHP：すべてのスプライト用
- WizardのHP：すべてのスプライト用
- bowmanのHP：すべてのスプライト用
【P_MPゲージ枠のスクリプト】
【P_MPゲージのスクリプト】
- i：このスプライトのみ
- warrior2のHP：すべてのスプライト用
- WizardのHP：すべてのスプライト用
- bowmanのHP：すべてのスプライト用
【コマンドアイコンのスクリプト】
- コマンド文字：すべてのスプライト用
- クローン番号：このスプライトのみ
- コマンド種類：すべてのスプライト用
スクリプトの作り方
ここからはプログラムを作っていく中でポイントとなる部分を説明します。
ポイント①：複数のクローンに番号を付けて区別できるようにする
複数のクローンを作ったときにそれらのクローンを区別するためには、クローンごとに別々の値（数字や文字）を持たせておけば区別することができます（たとえば「3番を持ってるクローンだけ10歩動かす」のようにプログラムすることが可能）。
プログラム上では、クローンを作る手前で変数に入れる値を変えながらクローンを作ると、クローンは作られた時の変数の値を持った状態で作られます。ただし、このとき使用する変数は必ず「このスプライトのみ」で作っておかなければいけません。
【HP数字】スプライトの場合
いきなり難易度の高いものからの説明になりますが、「HP数字」スプライトは、2つの変数「k」と「i」を使っていて両方の変数ともにクローンごとに別々の値を持たせています。
このスプライトのクローンは、HP（ヒットポイント）を表示するのですが「999／999」という分数を3つのプレイヤーの数だけ表示するようになっていて、分母はHPの最大値を表し、分子はゲーム中のプレイヤーのHPを表しています。
変数「k」は「999/999」という7桁をひと固まりとして考えて1～3までの数字を割り当てています。
一方で変数「i」は「999/999」の1つ1つの文字を区別できるように1～7の数字を割り当てています。
結果として変数「k」と「i」は下の図に示したような値を持った状態で作られることになります。
【P_MPゲージ】スプライトの場合
「P＿MPゲージ」スプライトの場合は、変数「i」にクローン別の値を持たせています。
このスプライトのクローンは、MP（マジックポイント）をゲージバーの長さで表現します。ただし、初期値は0（ゲージが無い状態）か100（ゲージが最大の状態）にしています。
表示するゲージバーはプレイヤー3体分なので、変数「i」には1～3までの数字を割り当てています。
結果として変数「i」の値は、下の図に示したようになります。
【コマンドアイコン】スプライトの場合
「コマンドアイコン」スプライトの場合は、変数「クローン番号」にクローン別の値を持たせています。
このスプライトのクローンは、プレイヤーが選択できるコマンドをアイコン形式で表示しています。
コマンドアイコンのクローンは上段に3個、下段に3個並んでいますが、左上のアイコンを1として時計回りに6までの値を「クローン番号」変数に持たせています。
「クローン番号」変数の値は、下の図に示したようになります。
ポイント②：特定のクローンだけを動かす
ダメージを受けたキャラクターのHPだけ変化させる
たとえば、「warrior2」のHP（ヒットポイント）だけ変化させたいとき、ポイント①の「【HP数字】のスプライトの場合」で説明したように、変数「k=1」の場合が「warrior2」のHPに該当します。
同じように「Wizard」のHPだけに変化を与えたいときは「k=2」と指定すれば識別することができます。
どのキャラクターのHPなのかは変数「k」の値で区別できました。次に3桁あるHPの数字のどの桁の数字を変更するかを指定する必要がありますが、それは変数「i」の役割になります。
これもポイント①で説明したように、変数「i=1」は分子の百の位、「i=2」は分子の十の位、「i=3」は分子の一の位、「i=4」はスラッシュ（/）、「i=5」は分母の百の位、「i=6」は分母の十の位、「i=7」は分母の一の位となっています。
各プレイヤーのHP変数の値を「HP数字」クローン（のコスチューム）に反映させるためには、変数「i」の値で場合分けします。（下図参照）
プレイヤーのHPの値（上の図の「キャラのHP」引数）が、1桁の場合・2桁の場合・3桁の場合で処理が変わるので「もし～なら」ブロックを使って場合分けをする必要があります。
いずれにしても、1つ1つの桁を切り取って、その数字を同じ形をしたコスチュームを選択するようにしています。
下の図（アニメーション）でそれぞれのプレイヤーのHPの値を変化させると、それに応じて分子の数字（コスチューム）が正しく変化することを確認してください。
使用した分だけMPを減らす
たとえば、「Wizard」のMP（マジックポイント）だけ変化させたいとき、ポイント①の「【P_MPゲージ】のスプライトの場合」で説明したように、変数「i=2」の場合が「Wizard」のMPに該当します。
同じように「bowman」のMPだけに変化を与えたいときは「i=3」と指定すれば識別することができます。
各プレイヤーのMP変数の値を「P_MPゲージ」クローン（のコスチューム）に反映させるためには、変数「i」の値で場合分けします。（下図参照）
プレイヤーのMP（たとえば「WizardのMP」変数）の値を「MP反映」定義ブロックの引数に与えると、MPの値に応じてMPゲージのコスチュームを変えています。（下図参照）
下の図（アニメーション）でそれぞれのプレイヤーのMPの値を変化させると、それに応じてゲージバーの長さ（コスチューム）が正しく変化することを確認してください。
コマンドを選択する
コマンドを選択するプログラムは、「HP数字」スプライトや「P_MPゲージ」スプライトのように変数の値を参照して変化させる方法とは異なり、マウス操作で切り替えるので方法が異なります。そのため、別の記事で詳しく紹介する予定です。
ここまでのポイントを押さえれば、ロールプレイングゲーム（RPG）の戦闘シーンにおけるキャラクターのHP／MPとコマンドアイコンを配置するスクリプトを完成させることができると思います。
失敗しやすいポイント
変数を「このスプライトのみ」で作るところを間違えて「すべてのスプライト用」で作ってしまった場合、たとえば「HP数字」の場合でいうと3体のプレイヤーのすべてのHPが同時に変化してしまいます。
どのようなプログラムを作ったとしても同じですが、クローンを別々に動かしたいのに同時動いて困ってしまったら、まずは変数が「このスプライトのみ」で作られているかを確認してください。
変数が「このスプライトのみ」で作られているとして次に確認すべきポイントは、「クローンされたとき」ブロックか、または「～を受け取ったとき」ブロックの下で変数を「もし～なら」ブロックで場合分けしているかを確認してください。
クローンを区別するのは、そのどちらか対処するのが無難だと思います。
こちらの記事も参考にしてください。
応用編
———
まとめ
今回の記事で説明した『ロールプレイングゲーム（RPG）の戦闘シーンにおけるキャラクターのHP／MPとコマンドアイコンを配置するためのプログラミング』のポイントをまとめます。
- ポイント①：複数のクローンに番号を付けて区別できるようにする（「このスプライトのみ」で作った変数をつくる）
- ポイント②：特定のクローンだけを動かす（「このスプライトのみ」で作った変数をつかう）
第2回目の今回は、ステータスバーに表示するプレイヤーの情報（キャラクターの顔アイコンとそのHP/MP、コマンドアイコン）を表示して、一部動作させる方法についても説明しました。
プログラムの実体としては複数クローンを識別するテクニックが中心になりました。
（何度もしつこく言いますが）このテクニックを使うには必ず「このスプライトのみ」で作った変数を使います。クローンはこの変数の値を持った状態で作られるということを覚えておきましょう。
そうすることで「このクローンは変数に～の値を持っているはずだからこれを使えば区別できるぞ」と考えることができるようになります。
どうでしたか？上手く再現できたでしょうか？
他にも役に立つTips（ティップス）記事をたくさん書いてますので、ぜひ見てみてください。（記事のタイトルに「Tips」と書いていたり「Tips」タグを貼ってあります）
