前回タイマーの改造に始まって、ForLoopやらSelectノードやら配列やら説明してたらボリュームがえらいことになったので、2部構成にしました。
クイズゲームとして、制限時間内に規定回数分正解するとゲームクリア。という仕様に決めました。前回の記事でその正解数をカウント表示するWidgetを作ったのでいよいよ組み込んでいこうと意気込んだところで、タイムアップの時にタイトル画面に戻るようにしてなかったのを思い出しました。
目次
タイトルへ戻る
タイムアップしてもまたクイズ画面に戻るようになっているので、タイトル画面に移行するように変えます。
ゲーム本体の wb_QuizGame を編集します。
NEXTボタンを押したときの処理はこうなってました。
タイムアップの時だけ、専用のカスタムイベントを用意してやります。
これでOK。コンパイルして確認してみる。
・・・
タイトル画面にちゃんと戻ることができているけど、リトライするとタイマーがリセットできていないことが判明。もう少し詳しく調べるために変数を確認することにします。
タイマーを管理しているのは wb_Main です。
効率よくチェックしたいので、タイマーの長さを短くするために 変数 Seconds の初期値を 5.0 にして再生してみると。
タイトル画面で一度出たきりでした。
何度かプレイしてみて判ったことが 2つ。
- 残り時間を保持する変数 RemainTime はリセットされる機会がない
- WidgetSwitcher に登録したWidgetは、表示されていなくても（アクティブになてっていなくても）EventConstruct は実行される
変数がどこでどう使われているかの確認は、Find References を使います。
Variablesリストの変数の上から右クリックメニューで選択できます。
エディタ下に Find Results というタブがあって、そこに検索結果が表示されます。
このリスト上でダブルクリックすると、配置されている箇所にワープします。
変数で 検索すると、 Get と Set が変数名の前に付きます。
これは、ジャンプするとわかるのですが、値の 入力 と 取得 を表しています。
タイムをリセットするには、Seconds の値と同じにする必要があります。Set ～ のところを見てみると、Event Construction のところと、 ポーズをかけたときに関数内の2か所で、 Event Construct はプレイ開始時 1回だけしか通ってませんでした。
なので、回答ボタンを押してポーズしたら、RemainTime は値が変更されます。そしてそのままタイムアップになってリトライしても、変更されたままになっていました。
ということで、初期化用のイベントを作って、別の場所からも呼べるようにします。
カスタムイベントを追加して、 initialize と命名。そこへ Event Construct でつないでいたのを移植します。
Seconds もこの際なので、 Set の形で置きなおして値を設定しやすくしました。
Event Construct には カスタムイベントをつなげば元の通りに動きます。
コンパイルして保存します。
再び、クイズゲーム本体にに戻ってきました。
この初期化のイベントを、ここに挟めば完了。
コンパイルして問題なければ、保存します。
タイマー問題はこれで解決です。
組み込む
ようやくカウント表示を組み込んでいきます。
組み込む場所は 2か所。
- クイズの回答する画面 ← 現在の状況を確認したい 演出は不要
- 正解したときの画面 ← 獲得したことを演出付きで見せたい
この 2つ タイミングを合わせる必要がありそうです。
流れとしては、
回答ボタンを押した瞬間、正解画面に切り替わります。
演出をじっくり見せるには、時間制限のある回答画面では嫌われるので、正解演出画面で見せるのがベスト。
NEXTボタンを押して画面が切り替わると、すぐに次のクイズが始まるので、その時点でカウント表示は更新されていてほしい。
流れはこれで行こうと思います。
時間制限については、メインの wb_Main でのみ表示されるパーツだったので、wb_Main で管理していました。今回は複数画面に配置しているので、カウント数の管理はもう一段上の wb_QuizGame でやるほうがよさそうです。
ということで組み込みを進めます。
まずはクイズのメイン画面から。
キャンバスに、wb_Count をドロップして配置します。
いい感じの場所に配置したら、編集モードをGraphにします。
カスタムイベントを新しく追加。
配置したばかりのカウントWidget の関数を呼び出すだけの簡単なお仕事。
このイベントは外から呼び出されるようにしています。いわば中継ってやつです。
これで、wb_Main の編集は完了です。
コンパイルして問題がなければ保存します。
つぎは、正解演出画面。
目立つ位置に置きました。
ここで提案。
演出表示が増えてきました。
緊張感のある回答画面から遷移してきて、時間も止まっているので一息つける画面でもあります。
NEXTボタンの表示タイミングに間を開けるのが気遣いというものです。※諸説あり
デフォルト状態として Visibility を Hidden にしておきます。
キャンバスはここまで。
編集モードを Graph に切り替えます。
こうなっています。
ここに、カウントのエフェクト再生とNEXTボタンの表示にタイムラグをつくるDelayノードをつなぎます。
PlayAnimation ノード と wb_Count の NewGetWithEffect イベントを呼び出したあと、Delay ノードで、少し待ってから、 NEXTボタンの Visibility を Visible に変えます。
NEXTボタンを押したときのイベント OnClicked で、再び NEXTボタンの Visibility を Hidden に戻しておきます。
Delayノードは、流れに一呼吸おいたりしてリズムを作ることができるので、演出を重視したい時には大変重宝しますが、使用には注意が必要です。
- 後ろの処理は待たされます（処理にポーズがかかるイメージ）
- 関数の中では使用できません（右上の時計アイコンが目印）
一定時間後に○○ という場合は、Set Timer by Event や Set Timer by Function との違いを理解して使いこなせるとカッコいいと思います。
NewGetWithEffect イベントには パラメータを受け取るようになっているので、どこかからパラメータ用の値を持ってこないといけません。
先頭のイベント StartAnim はBPインターフェイスで作ったものです。
クリックしても Detailsタブは空欄です。
ここでBPインターフェイスを再び編集します。
エディタを開いたら、Inputs のところから +ボタンを押して Integer型を選択します。
コンパイルして保存したら閉じます。
再び、wb_Right に戻ってみると、
ピンが追加されています。
このピンと、カウントWidgetのイベントをつなぎます。
まっすぐつなぐとノードと重なるので、リルートノードを使っています。
最後に繰り返し遊ぶときのために、カウントの初期化イベントを用意します。
この正解演出用のWidgetは これで編集終了です。
コンパイルして保存します。
つなげる
組み込んだカウントを機能させるために、クイズ本体 wb_QuizGame を編集します。
まずは 編集モードを Graph にします。
カウント数を管理するための、Integer型の変数をひとつ追加します。
最初にカウントアップしたいのは正解演出画面なので、
正解演出画面に移行するタイミングで カウントをプラスします。
正解ボタンを押したときだけ、Count変数に +1 します。
そして、そのプラスされた値を、StartAnim 関数に渡してやります。
足し算するための ＋ノードは、 int + int で探します。
次に正解演出画面から帰ってきたときの処理。
ここでようやくメイン画面 wb_Main のカウントを増やしてやります。
メイン画面に切り替えるのは、正解演出画面と、誤答演出画面からの帰り道。
同じところに戻ってくるので、ここを切り分けます。
正解画面専用のカスタムイベントを追加します。
ちょっと狭くなってきたので、少しスペースを作りました。
このイベントでやることは、カウントが規定数に達したかどうかを判定することです。
≦ （小なりイコール）で判定します。 ノード検索は半角で <= と入力します。
これで 3 以下 か 3 と同じなら True 、それ以外なら False という判定結果になります。
入力ピンが縦に並ぶので直感的じゃないですが、こうなってます。
判定結果が True ということは、まだノルマは達成していないので、
ここで、メイン画面のカウントを更新します。そのまま元の流れに戻します。
判定結果が False の場合。つまりは Count に 4 という値が入っているときです。
正解演出画面にいく直前に Count は +1 するので、3の状態で正解すると、まず 4 になってカウントアップ演出を見せてから戻ってきます。
ここで メイン画面に行くのではなく、ゲームクリア画面に行けばいいわけです。
いったんこの状態でコンパイルして確認してみましょう。
まだ設問が一つでさみしいですが、想定通りになっているでしょうか？
Congratulations!
クリアおめでとう画面を作ります。
構造的に変わったことをしないのと、タイトル画面に戻るボタンを置くので、 wb_Title を複製して改造することにしました。
名前は wb_Clear にしました。
やっぱり紙吹雪とか散らしたくなりますね。
いい感じの画像でも配置してみてください。
ここはオマケのオマケでテクスチャを使わないマテリアルを使ったキラリをご紹介。
マテリアルエディタの操作の説明は省くので要望があれば別の記事で説明します。
コンテンツブラウザで、Materialを作ったら、下のようにノードをつなぎます。
右端のノードを選択した状態で、 Detailsタブから
Material Domain を User Interface
Blend Mode を Transparent
にすると、Widgetで使用できるようになります。
コンパイルして保存したら、コンテンツブラウザから、直接Widgetのキャンバスにドラッグ&ドロップできます。
ブループリントは特に何もしないので、クリア画面はこれで完成です。
コンパイルして保存します。
画面を新しく作ったら、WidgetSwitcher に追加しないといけません。
ゲーム本体の wb_QuizGame を編集します。
編集モードを Designer にします。
WidgetSwitcher の上にドロップすると、一番下に追加されます。
いーなむの編集をします。
Newボタンを押してクリア用のいーなむを追加します。
保存したら閉じます。
ゲーム本体の wb_QuizGame に戻ります。
Branchノードの False に画面切り替えする関数をつなぎます。
NewScreenState に クリア画面のいーなむが追加されているので選択します。
つぎに、クリアおめでとう画面からの戻り先を用意します。
今回はタイムアップと同じにします。
あと少し
クリアしてもしなくても、タイトル画面に戻るようにしているので、繰り返し遊ぶことができます。
カウントをリセットしないと続きからカウントしてしまうので、カウントの初期化処理を入れます。場所はこのタイトル画面へ切り替えるところ。
変数を 0 に戻すのと、正解演出画面の表示を 0 個に戻します。
今回はこれで完成です。
このグラフの全貌です。
コンパイルして保存したら確認してみましょう。
今回はここまでです。
わからないところやツッコミなどあれば、このブログのコメント機能をご利用いただくか、Twitter（@MMAn_nin）にてメッセージを送ってください。
それなりにゲームぽくできたので、次回でおまけ編を最終回にしようと思います。
クイズゲームらしく設問を増やしてランダムに出題できるようにします。
ではでは
ステキなクリア画面ライフを！
