Unityで連続、複数のQTEに対応する

今回は1つのQTE(QuickTimeEvent)が終わったら連続して次のQTEが出現する機能、

また同時に複数のQTEを出現させ順番に実行させる機能を作成していきます。

今回の機能は

Unityでアクションゲーム等で登場するQTE(QuickTimeEvent)機能を作成していきます。

の記事で作成した1つのQTE機能を改造して対応していくので、まだ見ていない方は↑の記事を参照してください。

スポンサーリンク

QTEクラスを作成し情報をまとめる

1つのQTEを実行する時はあまり気にしなくてもよかったんですが、連続したり複数を同時に表示する場合は『押すべきボタン』『制限時間』等、

QTEの情報がばらばらにあると不便です。

そこで1つのQTEの情報をクラスという形でまとめてしまい使いやすくします。

新しいスクリプトQTEClassスクリプトを作成します。

JavaScriptで作成すると、

↑のようになります。

クラスに情報をまとめたのでインスペクタで設定する際も1つ1つのQTE情報を指定する事が出来ます。

C#で作成した場合は

Systemをusingディレクティブで宣言し、クラス宣言の前に[Serializable]というアトリビュート(属性)を付けておきます。

そうしないとインスペクタで値を設定する事が出来ません。

placeはQTEを表示する場所をゲームオブジェクトを指定して設定出来るようにします。

この情報を使う事でこのゲームオブジェクトが動けばQTEも一緒に動くようになります。

QTEUIを変更する

QTEを連続、複数登場させることにより押すべきボタンのテキストなど幅を取り過ぎて邪魔になるので、

QTEUIをもっとシンプルに表示出来るようにします。

シンプルにしたQTEUI

↑のようにQTEUIの子要素にあったTextを削除し、SliderをImageの上に移動します。

SliderがImageの背景に表示されるように位置を調整し、PanelのアンカーをMiddle Centerに変更し、Width、Heightを40ほどにします。

QTEUIのサンプル画像

↑が作成したものでImageの周りをSliderのイメージが取り囲むという感じになりました。

さらにQTEUIの子要素のPanelをAssetsフォルダにドラッグ&ドロップし、プレハブにしてQTEイベントが発生したらインスタンス化し使用するようにします。

QTEUIの子要素のPanelは削除し、子要素に何もない状態にします。

QTE機能を改良する

QTE機能を改造していきましょう。

主人公操作スクリプトQTECharacterMoveを改造

主人公操作スクリプトを改造します。

ほぼ同じなので一部抜粋します。

QTE状態の時の処理でQTEが終了しているかどうかを確認し、終了していたら自身の状態を変更するようにします。

主人公の検知とQTEのパラメータ設定スクリプトSearchCharaAndParamを改造

主人公の検知とQTEパラメータの設定をしていたSearchCharaAndParamスクリプトを改造します。

limitやpushButtonのフィールドを宣言し、そこにQTEの情報を入れていましたがQTEClassにまとめたのでそれらのフィールドを削除し他のメソッドを呼び出す時にQTEClassごと渡すようにします。

QTEClassは配列にしてインスペクタで複数設定出来るようにしたのでnum変数を使って順番にQTEの情報を取りだすようにしています。

SearchAndParamスクリプトを設定したゲームオブジェクトの領域に侵入した時に、一括で実行したいQTEClassをインスペクタに設定するという感じになります。

qteModeで設定したQTE全てのタイマーを同時にスタートさせるか、それとも1つ1つタイマーを起動するかどうかの設定です。

SetFinishでは連続したQTEに対応する為、設定したQTEの数を越えるまではisFinishにtrueを入れません。

次のQTEクラスを指すようにし再度SetParamメソッドを呼び出しています。

TimeLimitスクリプトはこの後作成しますが、第3引数にはすぐにタイマーをセットするかどうかで、第4引数は今のQTEが成功した時に次のQTEイベントを押せるようにしますが、その時にタイマーをリセットするかどうかです。

TimeLimitスクリプトを改造

次にTimeLimitスクリプトを改造していきます。

QTEの押すべきボタンをSprite配列として持っておき押すべきボタンに合わせて画像を変えるようにします。

↑のあたりが追加したフィールドですね、QTEを指定されたゲームオブジェクトの場所に表示し一緒に動かすので動かすパネルのTransform情報を使います。

Updateメソッドでは移動するゲームオブジェクトの位置に合わせてQTEのPanelも移動させる為、

の部分でQTEのパネルを指定したゲームオブジェクトの位置に表示します。

QTEのパネルはUIなので3D空間にあるplaceの場所をUIの位置に調整してから位置を設定しています。

それをしているのが

ですね。

メインカメラから指定する3D空間の位置(place.position)のスクリーン位置(カメラの描画範囲の位置)を取得出来ます。

SetParamメソッドはQTEの初期処理をしています。

引数で受け取ったresetがtrueの時はスライダーの値等をリセットします。

startFlagがtrueの時はタイマーをスタートさせ、Panelの大きさを変えて今押すべきQTEイベントのボタンを解りやすくします。

これでスクリプトの改造が出来ました。

連続したQTEが実行出来るか確認

機能の改造が出来たのでインスペクタで設定し実行してみましょう。

連続したQTEのサンプルの設定

QTESearchAreaに設定しているSearchCharaAndParamのインスペクタで1つ1つのQTEの設定をします。

QTEを表示する位置のゲームオブジェクトCubeを作成し、移動させるようにしておきます。

連続QTEの為のTimeLimitの設定

Sliderに設定しているTimeLimitスクリプトは↑のような感じで設定します。

連続QTEサンプル

↑のように最初のQTEが主人公キャラの位置に表示され、それを成功するとCubeの位置に次のQTEが表示されました。

QTEを複数表示する

QTEを連続で表示する事は出来ましたが、あらかじめ複数のQTEを表示しておき次に押すべきボタンがわかるようにしたい事もあります。

そこでさらにさきほど作った機能を改造し複数のQTEを表示したり、同時にタイマーが起動するか順番にタイマーを起動するかを選択出来たりする機能を取りつけます。

複数のQTEを表示する機能を確認

SearchAndParamスクリプトのqteModeにチェックを入れると設定したQTEが同時にスタートするようになります。

複数のQTEに対応した設定

QTESearchAreaに設定したSearchCharaAndParamスクリプトのインスペクタに設定をします。

まずはModeにチェックを入れて確認します。

↑のように順番にタイマーが起動され、今現在のQTEだけ少し大きくなっています。

次はModeのチェックを外して確認します。

↑のように同時にタイマーが起動され、全てのQTEが少し大きくなっていますが、押さなければいけないのは主人公の所に表示されているQTEです。

この今押すべきQTEの表示をもっとわかりやすく改造すると良さそうですね。

良さそうというだけで作りませんが・・・・・(;一_一)

複数のQTE対応機能を作り終えて

今回複数のQTEに対応しましたが、元々1つのQTE機能を使い勝手をそのままに改造したので中身はゴチャゴチャした感じになりましたね。

今回の場合は主人公キャラクターがずっと止まった状態なので、QTE時には自動で動くようにして次々とQTEが発生するというものもがんばれば作れると思います。

QTEの発生場所もゲームオブジェクトの位置に発生させる事ができるので、今回のように見えるゲームオブジェクトだけでなく見えないゲームオブジェクトを設置しそこに

QTEを表示させるという事も出来ます。

今回のQTE用の画像が押すべきボタンと一致していないのはご愛敬ということで・・・・(-_-)

スポンサーリンク

記事をシェアして頂ける方はこちら

フォローして頂くとやる気が出ます