RPG戦闘シーンのScratchプログラミング解説の第4回目です。
今回は、自分が操作するプレイヤーを選択するときに使用するカーソルについてです。
このカーソルは、3体のキャラクターの中から自分が操作するプレイヤーを選ぶときに表示されます。
この記事では、ロールプレイングゲーム(RPG)の戦闘シーンにおいて自分が操作するプレイヤーを選択するカーソルの表示方法とその動かし方について紹介します。
なお、このプログラムで使用する画像や音声は、これまでの記事でもたびたび紹介している『無料で使えるスーパーパワーアセットパック(CC0)』にRPGの戦闘シーン向けの素材があるので、それを使用しています。
完成品
この章の内容をご自身のScratch環境に反映すれば、同じ動きを再現することができます。
完成した動き(この記事のゴール)
ゲームをスタートするとキャラクターの頭上に白色のカーソルが点滅して表示されます。
キーボードの右矢印キーを押すとカーソルが時計回りにキャラクターを移動します。また逆に左向き矢印キーを押すと反時計回りにカーソルが移動します。
操作するキャラクターを決めたらスペースキーを押して決定します。するとカーソルは点滅を止めて点灯します。(このときカーソルはコマンドアイコンへ移動しますが、この部分は次回の記事で説明します)
完成した動き(最終形態)
最終形のイメージをつかんでもらうために、すべてのプログラムを結合して実装した最終形態のアニメーションの序盤部分を載せておきます。GIF画像なので音声は聞こえませんが、実際にプレイするとBGMが流れます。
使用したスプライト
スプライトは「初期設定」「背景」「ステータスバー」「warrior2」「Wizard」「bowman」「giant」「mushroom」「mimic」「フェイス」「HPMP文字」「HP数字」「P_MPゲージ枠」「P_MPゲージ」「コマンドアイコン」「E_HPゲージ枠」「E_HPゲージ」「Pマーカー」の18個です。
アクションゲーム用の背景・キャラクター・アイテム等の画像や音声は、パブリックドメインである「スーパーパワーアセットパック(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)
【フェイスのスプライト】
こちらの記事を参照してください↓↓↓(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン ステータスバーにキャラクターアイコン・HP/MPとコマンドアイコン配置する(Tips)
【HPMP文字のスプライト】
こちらの記事を参照してください↓↓↓(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン ステータスバーにキャラクターアイコン・HP/MPとコマンドアイコン配置する(Tips)
【HP数字のスプライト】
こちらの記事を参照してください↓↓↓(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン ステータスバーにキャラクターアイコン・HP/MPとコマンドアイコン配置する(Tips)
【P_MPゲージ枠のスプライト】
こちらの記事を参照してください↓↓↓(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン ステータスバーにキャラクターアイコン・HP/MPとコマンドアイコン配置する(Tips)
【P_MPゲージのスプライト】
こちらの記事を参照してください↓↓↓(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン ステータスバーにキャラクターアイコン・HP/MPとコマンドアイコン配置する(Tips)
【コマンドアイコンのスプライト】
こちらの記事を参照してください↓↓↓(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン ステータスバーにキャラクターアイコン・HP/MPとコマンドアイコン配置する(Tips)
【E_HPゲージ枠のスプライト】
こちらの記事を参照してください↓↓↓(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン 敵キャラクターのHPゲージを表示する(Tips)
【E_HPゲージのスプライト】
こちらの記事を参照してください↓↓↓(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン 敵キャラクターのHPゲージを表示する(Tips)
【Pマーカーのスプライト】
「Pマーカー」スプライトは、「rpg-battle-system\HUD」フォルダにある「arrow-down.png」ファイルをそのまま使用します。
完成したスクリプト
完成したスクリプトの全体です。
以前の記事で説明済みのスクリプトは、過去記事へのリンクを表示しています。
【初期設定のスクリプト】
以前の内容で完成しているので省略します。(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション(Tips)
【背景のスクリプト】
以前の内容で完成しているので省略します。(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション(Tips)
【ステータスバーのスクリプト】
以前の内容で完成しているので省略します。(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン キャラクター配置とアニメーション(Tips)
【warrior2のスクリプト】
今回は解説のテーマではないので省略します。
【Wizardのスクリプト】
今回は解説のテーマではないので省略します。
【bowmanのスクリプト】
今回は解説のテーマではないので省略します。
【giantのスクリプト】
今回は解説のテーマではないので省略します。
【mushroomのスクリプト】
今回は解説のテーマではないので省略します。
【mimicのスクリプト】
今回は解説のテーマではないので省略します。
【フェイスのスクリプト】
以前の内容で完成しているので省略します。(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン ステータスバーにキャラクターアイコン・HP/MPとコマンドアイコン配置する(Tips)
【HPMP文字のスクリプト】
以前の内容で完成しているので省略します。(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン ステータスバーにキャラクターアイコン・HP/MPとコマンドアイコン配置する(Tips)
【HP数字のスクリプト】
以前の内容で完成しているので省略します。(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン ステータスバーにキャラクターアイコン・HP/MPとコマンドアイコン配置する(Tips)
【P_MPゲージ枠のスクリプト】
以前の内容で完成しているので省略します。(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン ステータスバーにキャラクターアイコン・HP/MPとコマンドアイコン配置する(Tips)
【P_MPゲージのスクリプト】
以前の内容で完成しているので省略します。(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン ステータスバーにキャラクターアイコン・HP/MPとコマンドアイコン配置する(Tips)
【コマンドアイコンのスクリプト】
今回は解説のテーマではないので省略します。
【E_HPゲージ枠のスクリプト】
前回の内容で完成しているので省略します。(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン 敵キャラクターのHPゲージを表示する(Tips)
【E_HPゲージのスクリプト】
前回の内容で完成しているので省略します。(※リンクをクリックすると対象の箇所まで飛びます)
【Scratch 3.0】RPG戦闘シーン 敵キャラクターのHPゲージを表示する(Tips)
【Pマーカーのスクリプト】
- コマンド選択中キャラ:すべてのスプライト用
- blink:このスプライトのみ
- ip:このスプライトのみ
- Pキャラとコマンド:すべてのスプライト用
- プレイヤー種類:すべてのスプライト用
- プレイヤー選択:すべてのスプライト用
スクリプトの作り方
ここからはプログラムを作っていく中でポイントとなる部分を説明します。
ポイント①:カーソルを生きているキャラクターの頭上に表示する
カーソルの初期位置として、3体いるプレイヤーのいずれか1体の頭上に表示するのですが、ゲーム中に敵にやられて画面上から消えてしまってる場合があります。
そのようなプレイヤーは選択できないようにしなければいけませんので、過去の記事で説明した「プレイヤー種類」リストを使って判別するようにします。
生きているプレイヤーのうち「プレイヤー種類」リストの一番上にあるキャラクターの場所にカーソルを移動させてy座標を45ピクセル上に移動します。
そして、カーソルの初期位置として選ばれたキャラクター名を「プレイヤー選択」リストにセットします。
また、下図のスクリプトの判定条件に「((Pキャラとコマンド)に~が含まれる)ではない」が含まれていますが、これはプレイヤーが攻撃するターンの最中にそのキャラクターが既にコマンドを選択していたら2回コマンドを選べるのはおかしいので除外するための条件です。
ポイント②:カーソルを右回り左回りにキャラクター間を移動させる
変数「ip」の初期値は「1」です。「右向き矢印キー」を押すと変数の値が「1」ずつ増えます。「左向き矢印キー」を押すと「-1」ずつ変化します。変数「ip」の最小値は「0」、最大値は「プレイヤー種類」リストの長さです(このリストは画面上に存在するプレイヤーの名前を格納)。
「Pキャラとコマンド」リストは、『選択されたプレイヤーの名前・そのプレイヤーが選んだコマンド・攻撃相手の敵キャラクターの名前』が格納されるリストです。このリストの中に格納されているプレイヤーにはカーソルは移動せず、飛ばして次のプレイヤーに移動します。
また、現在カーソルが当たっているプレイヤーの名前は「プレイヤー選択」リストに格納されます。
これらの点を理解して、下図のスクリプトのコメントを読むことでプログラムの内容を理解できると思います。
右回りの場合
「右向き矢印キー」を押した場合です。カーソルが右回り(時計回り)にキャラクター間を移動します。
同じターン内で既にコマンドを選択済みのキャラクターは飛ばして、まだコマンドを選択していないキャラクターにカーソルが移動します。
左回りの場合
「左向き矢印キー」を押した場合です。カーソルが左回り(反時計回り)にキャラクター間を移動します。
右回りと同じように、同じターン内で既にコマンドを選択済みのキャラクターは飛ばして、まだコマンドを選択していないキャラクターにカーソルが移動します。
カーソルの移動と「プレイヤー選択」リストの値は連動しています。その様子は下のアニメーションをご覧ください。
ポイント③:スペースキーを押してプレイヤー選択確定とカーソル点灯
カーソルがプレイヤーに当たった状態で「スペースキー」を押すと、プレイヤーの選択を確定します。また、カーソルが点滅から点灯に変わります。
プレイヤーの選択を確定したら、「Pキャラとコマンド」リストにそのキャラクターの名前を追加します。同時に同じ名前を「コマンド選択中キャラ」変数にも格納します。変数の方は、次の記事で説明するコマンド選択処理のところで使用することになります。
次のコマンド選択処理に移動させるために「(コマンド選択)を送る」ブロックでメッセージを送ります。
また、カーソルを点滅状態から点灯状態に変更するため、「blink」変数の値を「1」から「0」に変更します。
ここで「Pマーカー」スプライトの処理から一旦抜けて別のスプライトに処理を移すので「スプライトの他のスクリプトを止める」と「このスクリプトを止める」の2つのブロックで、このスプライトのスクリプトを停止させます。
カーソルの点滅状態は、下図のスクリプトのように「blink」変数の値が「1」の間だけ、幽霊効果を「0」と「100」を交互に実行しながら実現しています。
そのため、上のスクリプトで「blink」変数を「0」にし、且つ「画像効果をなくす」ことで点滅状態が終了して元の画像の状態に戻ったことで点灯状態をつくり出しています。
ここまでのポイントを押さえれば、ロールプレイングゲーム(RPG)の戦闘シーンにおいて自分が操作するプレイヤーを選択するカーソルの表示方法とその動かし方のスクリプトを完成させることができると思います。
失敗しやすいポイント
上で説明した変数「ip」の値の増減の範囲の部分は、細かい処理ですが注意が必要です。
今回の場合、最大値は3体のプレイヤーがいるので「3」になるのですが、敵にやられたら画面上に残っているプレイヤーの数が2体、1体、0体と減っていくので、最大値も「2」「1」「0」と減っていってしまいます。
このように状況によって最大値が変わるので「3」固定とすることはできずに別の方法を考えなけれいけません。そこでその時に生き残っているキャラクターが格納されている「プレイヤー種類」リストの長さを使うことで対処しています。
今回に限らず変数を利用する際には、その変数が取りうる範囲(最小値~最大値、ステップ)を注意深く確認するようにしましょう。
応用編
———
まとめ
今回の記事で説明した『ロールプレイングゲーム(RPG)の戦闘シーンにおいて自分が操作するプレイヤーを選択するカーソルの表示方法とそれを動かすためのプログラミング』のポイントをまとめます。
- ポイント①:カーソルを生きているキャラクターの頭上に表示する
- ポイント②:カーソルを右回り左回りにキャラクター間を移動させる(敵にやられたキャラクターはスキップ)
- ポイント③:スペースキーを押してプレイヤー選択確定とカーソル点灯
第4回目の今回は、プレイヤーの頭上にカーソルを表示して、これからアクション(攻撃やアイテムの使用など)を起こすキャラクターを選択するための動かし方とカーソルの状態遷移(点滅→点灯)について説明しました。
今回のプログラムは少し回りくどい感じを受けたかもしれませんが、この次に紹介するコマンド選択が終わったら、再度このプログラムに戻ってきて今度は2体目のキャラクターを選択する必要があるので、そのことまで考慮した形になっているためかもしれません。存在するキャラクターの選択とコマンドの選択が全部終わってから実際の攻撃シーンに移るようになっています。
どうでしたか?上手く再現できたでしょうか?
他にも役に立つTips(ティップス)記事をたくさん書いてますので、ぜひ見てみてください。(記事のタイトルに「Tips」と書いていたり「Tips」タグを貼ってあります)