前回の記事で、パラパラとパネルを出現させるやつで遊んでたら、ビンゴカード ぽい見た目になったりしたので、さらに調子に乗ってミニゲームにしてみた。もう10年以上前？かな、一度流行ったことがあって、それの再現です。
ルールは、１～25までの数字が書かれたパネルを、順にクリックして全部クリックするまでにかかった時間を競うというものです。あぁ アレか・・・という溜息が聞こえてきそうですが、わりと手軽？に作れたので記事にしてみようかと。ただ記事的にちょっとボリュームがあるかも・・・
作りはシンプルにいきます。作るWidgetは2つだけ。
まずは１個目のWidget。キャンバスから。
ここに 120ｘ120の CanvasPanel を一つ。
このキャンバスに対して、Image（下敷き） と TextBlock（数字）、Image（カバー用）を子供に します。
ここまでは前回と同じ。
このパーツたちに対してアニメーションを用意します。
今回用意したのは以下の４つ。
FADE_IN
最初の出現用です。この時点で数字はわかりません。
COVER_OUT
ゲーム開始時に 上の FADE_IN 再生後の状態から続く感じで再生します。インパクトを出すために青いカバーを白くします。
このタイミングで数字と下敷きを表示するのですが、ちょっとだけ仕込みが必要。
このあと数字を拡大して消すときに、隣のWidgetにかぶさるとクリック判定を邪魔してしまうのを防ぐために、TextBlockだけは Hit Test Invisible を選択します。
REMOVE_PANEL
クリックして順番が正解した際の演出です。数字だけを消しています。
FADE_OUT
全てのパネルを消した後の演出です。
キャンバスはここまで。
次はWidgetブループリント。
まずは変数を４つほど用意。
ちょっと色気を出すためにSlateColor型の変数を配列にします。
適当に５色をセット。
次に値を受け取る関数を用意します。
Integer型のInputピンを２つ。受け取った値は、後で別の場所でも利用するので、すぐに用意しておいた変数にお取り置きします。Indexはパネルの場所を表す値。左上が０、右下が24です。
このIndex番号を ％５（５で割った余り） すると、下のようになります。
この計算した数値をフォントの文字カラーとして配列から引っぱり出しすと左の列から順に色が変化することになります。
Numberは表示するための数字です。
関数の次は、イベントディスパッチャーを２つ用意します。
アニメーションの終了通知と、クリックされた際の応答に使うためです。
応答用のは、値を送り返すのでInputピンを２つ追加します。
アニメーションを再生するためのカスタムイベントを用意していきます。
最初の登場演出用。
出現時、まだクリックを受け付けたくないので、フラグを False にしておきます。
※このフラグは後述のマウスイベントの処理のところで活躍します。
このアニメーションの後に、『 Click to Start 』って出したいのでアニメーション終了通知のために、イベントディスパッチャーを呼び出し（Call）ています。
このWidgetは画面に 25個も表示するので、通知処理は最後の１個だけで十分です。前の24個は通知処理しなくてもいいので、カスタムイベントのInputピンにBooleanを一つ追加しています。
ちなみに、このイベントを呼び出す際は下のようなノードになります。
次は、ゲーム開始のための表示演出イベント。
ここから、マウスクリックを受け付けるので、フラグを True にします。
次は、数字がヒットして、消えるときの表示演出イベント。
ここで マウスクリックを受け付けたくないのでフラグを False にします。
次のイベントは、ゲーム終了時の表示演出イベント。
これで４つのアニメーション再生の準備は整いました。
最後に、マウスクリック時の処理を用意します。
関数を作るところに Override ボタンがあるのでそこから
On Mouse Button Down を選択してから編集します。
クリック受付するかしないかのフラグをみて分岐させます。
これでパネル用Widgetが用意できました。
メインになる親のWidgetを用意します。
キャンバスには パネルを並べるための WrapBoxを一つ。
中央になるように調整します。
パネル１枚が 120ｘ120なので、 120ｘ5 + スキマ から指定幅を計算。指定幅を越えたら改行するので、６個目が並ばないように指定します。
Size To Content にチェック付けると、 Size XとSize Y は無意味なので初期値でOK。
次に、タイマー用の TextBlockを配置します。
とりあえず、WrapBoxのすぐ上あたりに。
次は、クリアしたときの「 Complete! 」をTextBlockで配置。
これはクリアしたときまで取っておくので、配置したらVisibilityの設定を非表示（Collapsed）にしておきます。
あとは、Click To Start のボタンを配置します。
覆うように大きく大胆に広げます。
配置したButtonの子供にTextBlockを置くと、中にテキストを置けます。
Hierarchyはこんな感じ。
このままだと後ろが見えないので、Buttonのカラーをカスタマイズします。
とりあえずカラーは 黒 でアルファが 0.5 くらいにします。
Buttonコンポーネントは専用のイベントをいくつか持っているので、Normal、Hovered、Pressed の３か所を触ります。
あくまでもボタンの地の色で、テキストブロックのカラーは変化しません。
Buttonを大きくするのは、数字のパネルがクリックを受け付けてしまうのを防ぐ目的もあります。
キャンバスはこの辺にして、ブループリントを編集します。
まずは、数字を配列にセットする関数。
配列のIndex番号は ０（ゼロ）始まりだけど、ゲームの表示は 1（イチ）からなので、ForLoopを使って、１～25 の数字を格納。
配列をシャッフルする関数。
配列にShuffleノードをつなぐだけで配列の中身をシャッフルしてくれます。
上の２つの関数を Event Pre Construct につないでおきます。
クリックしたパネルの数字が順番通りかどうかチェックするための変数もここで初期値をセットしておきます。
このイベントは 、ブループリントをコンパイルした時点で一度処理されるという特殊仕様です。結構便利な使い方ができるので後ほどご紹介します。
次は数字パネルのWidgetを並べる処理。
真ん中付近の配列の作り方は、
Create Widget ノードの ReturnValue ピンから Promote to Variable（変数へ昇格） して、一旦 "専用の型"の変数を作成します。
Variablesのリストに追加されているので、Detailsから配列に変更します。
この操作は、一旦グラフから取り除いてからやると、エラーチェックが走らないのでオススメ。つながった状態でやると警告されます。
で、数字パネルをWrapBoxに追加した後は、数字パネルを出現させます。
出現開始をする前に、アニメーション終了の通知が欲しいので最後の数字パネルにバインドを施しておきます。そして再び ForLoopを使って一斉に数字パネル全部に数字を渡しつつFADE_INのアニメーションを再生させる関数を呼び出しています。
その関数はこちら。
と、その前にカスタムイベントを準備。
数字パネルのバインドで送り返してもらう値がInteger型で２つあります。それを受けるのであらかじめこちらでも２つのInputピンを装備させます。このイベントは後から作っても大丈夫。でも少しだけ手数が増えます。その理由はこれ↓
関数の中にカスタムイベントを置くことはできないので、替わりに CreateEventノードをつなぎます。
バインドノード経由のイベントをつなぐと、Select Function というプルダウンリストが出てきます。そこでイベントディスパッチャーの値を渡せるイベントを指定するのですが、Inputピンの型と数が一致していないと、プルダウンに出てきてくれないのです。
そのカスタムイベントの続きはこんな感じになります。
クリックした数字パネルから応答が返ってきた値を比較して、同じなら成功なので、クリックした数字パネルの演出イベントを呼び出します。まだ数字パネルが残っているかどうかチェックして、残っていれば順番をチェックするカウンター用の変数を一つ進めます。
なんとか 25までクリックできたら、終了処理に移ります。続き。
Complete! のテキストを表示して、残ったパネルを消すイベントを呼びます。
そろそろ大詰め。ゲーム開始用のイベント。
編集モードをDesignerに変えて、Click To Start 用のButtonパーツを選択。
Detailsタブの一番下に、グラフにイベントを生成するボタンがあるので、On Clicked をクリック。
ここにゲーム開始の処理をつないでいきます。
最後にフラグを True にしていますが、これはタイマー表示に使います。
タイマーは ゼロから始まる～ のでEvent Tick で Float型の変数に加算していきます。
ここで便利なノードが、 FormatTextノード。
「単位」をくっつけたり、文章の途中に任意のテキストを挿入するといった使い方ができます。
詳細は公式サイトにあります→ ユーザーに表示するテキストの書式設定
こちらのブログエントリーもおすすめです→ UE4ワイルドカードを使った書式設定で文字列を作成する
イメージしやすそうな例で説明を書いてみます。
取り出した直後はこんな形。
ここにピンを増やすのですが、増やし方が変わっています。
例えば、こんな文章があったとします。
おおトンヌラよ、しんでしまうとは ふがいない。
この名前のところを、半角の中括弧（波括弧）でピン名を挟んだ形、｛ ピン名 ｝に置き換えます。
おお{CharacterName}よ、しんでしまうとは ふがいない。
これを FormatText に入力してみると、こうなります。
新たに入力ピンが追加されます。
｛ピン名｝ はいくつでも配置できます。
今回は、簡単に Float型の値に、 sec をくっつけています。
{Time}sec
これで一通りの用意ができました。
レベルブループリントからViewportに追加して、マウス制御用のノードをつないで、
再生してみます。
www.youtube.com
マウスカーソルがキャプチャできなかったのでちょっとわかりにくいかもですが、一通り遊べてます。
も少し整えないといけないところがあるのですが、そのあたりは次回に回そうと思います。
何度かチャレンジしてみて、なかなか12秒を切れなかった。パネルの大きさとかも影響するかもしれない。数字の色とか、フォントをいじるとまた違った難易度になると思います。一度つくってみるといろいろアレンジしたくなるので楽しいですね。
ではでは
ステキなパネルクリックライフを！
