みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

クリックするだけの簡単なゲーム 《改造編》

さっそく前回作ったやつを改造していこうと思います。

 

limesode.hatenablog.com

 

改造ポイントは4つ。

  1. 繰り返し遊べるようにする
  2. タイマーのガクガク震えるのをなんとかする
  3. ちょっと難易度を上げてみる
  4. おまけ

 

まずは、クリアしたあとにボタンを表示したいので、キャンバスにButtonを追加します。作り方は開始時の Click To Start ボタンと同じ作りでいきます。

f:id:hiyokosabrey:20190211142709p:plain

配置したら、Visibility を Collapsed にして非表示にしておきます。

f:id:hiyokosabrey:20190211143238p:plain

 

このボタンを表示する処理をクリア時の処理に追加します。

f:id:hiyokosabrey:20190211144125p:plain

ボタンが表示された次は、ボタンがクリックされた際の処理です。

エディタの Variables の欄に、Buttonが追加されているので選択して Details タブを更新します。

Events の項目に On Clicked があるのでクリックしてイベントノードを取り出します。

f:id:hiyokosabrey:20190211144558p:plain

イベントノードを取り出したら、ひとまずボタンは用済みなので再び非表示に戻してやります。合わせて Complete! の文字も消します。

f:id:hiyokosabrey:20190211150238p:plain

 この後、いろいろと初期化と再セットをしていくのですが、一旦寄り道して、タイマーの改造を進めます。とはいえちょっとブループリントが賑やかになってきたので、改造というよりは新しくタイマー用のWidgetを作ることにします。

 

 いつものようにキャンバスにパーツを配置していくのですが、Epicがストアで無料で提供してくれているプロジェクトを見ていて最近学習した方法があるのでそれでいきます。今頃ですが・・・

 キャンバスのサイズはでデフォルトだと 1080pだったりしてPC環境やコンソールのゲーム機だとそのままで良かったりで、あまり気にしてなかったのですが、Widgetで部品パーツを作る際はなんかもったいないような気がしてました。

f:id:hiyokosabrey:20190211151559p:plain

この右上の Fill Screen を 変更できることができます。

固定サイズなら、Custom、 中身次第にするなら Desired に切り替えるだけ。

f:id:hiyokosabrey:20190211151714p:plain

タイマーはデジタル的に表示したいのでTextBlockをキャンバスパネルの子供にして表示桁ぶん並べます。

f:id:hiyokosabrey:20190211152006p:plain

Desired にしていると キャンバスのサイズは自動的に合わせられます。

ピリオド以外は Is Variable のチェックを付けておきます。

f:id:hiyokosabrey:20190211152240p:plain

 

ブループリントを編集します。

小数点の値を受け取って桁を分解してテキストを更新する関数を用意します。

f:id:hiyokosabrey:20190211153322p:plain

桁の分解は、小数点の扱いがポイントになります。Fraction で整数部分を、Floor で小数以下を切り捨てることで、小数点を境界にして大きく2つに分けることができます。 あとはそれぞれで整数にして計算します。

図で解説してる過去記事を貼っておきます。

limesode.hatenablog.com

これで、数字の文字幅によるブルブルがなくなります。

f:id:hiyokosabrey:20190211154907g:plain

この関数は外から呼ばれますが、初期値のセットも兼ねて、グラフにつないでおきます。

f:id:hiyokosabrey:20190211154354p:plain

タイマーは完成。

 

メインのWidgetに戻って、配置します。

もとのTextBlockで簡易的に作ったタイマーをこのWidgetに差し替えます。

f:id:hiyokosabrey:20190211201015p:plain

中央揃えの場合、Size To Content にチェックを付けるとレイアウトしやすいです。

タイマーの更新処理のところも、このWidgetの関数に置き換えます。

f:id:hiyokosabrey:20190211222746p:plain

100以上の桁表示を作っていないので、99.99カンストするようにしています。表示は見た目に止まりますが変数へのカウントアップは止めていないので、必要であればもう一つフラグを用意した方がよいかも。数字の桁を足す場合、 000.00 となるので、ゼロサプレスの処理が欲しくなる。この辺りは、ランキングの仕組みや、100秒を上回るのが当たり前のような難易度かどうかなどを考えると決まってくると思います。

 

で、寄り道で中断していたRetryボタンの処理の続きです。

f:id:hiyokosabrey:20190211203237p:plain

変数を初期値に戻します。このあと難易度を上げるところで理由を書きますが、ここで StepCount の値を 1始まりではなく 0 にします。

 

あとは、出現イベントから始めれば、通常のゲームループに戻れるはずです。

そのためのカスタムイベントを作って、出現処理のところに脇からつなぎます。

f:id:hiyokosabrey:20190211203936p:plain

 

このカスタムイベントを呼び出すのが、さきほどの ForEachLoop処理の Completeピンです。

f:id:hiyokosabrey:20190211204204p:plain

 

これで大体できました。仕上げに難易度を上げる処理です。

 

その準備として、Integer型の配列変数をもう一つ追加します。

f:id:hiyokosabrey:20190211204532p:plain

次に、先に作っていた NumberPool という Int型の配列も少し初期化の部分を変更します。Event Pre Construct の部分に、配列のサイズを設定するノードを挿入。

f:id:hiyokosabrey:20190211204931p:plain

数字を初期化する関数を改造します。

 

まず、前回と同じく 1~25 までの数字で遊ぶ場合。

f:id:hiyokosabrey:20190211225827p:plain
 先に配列のサイズを決めているので、ここでは Addノードは使えません。代わりにSet Array Elem という、指定した 場所の内容を書き変えるノードを使います。

 今回新しく追加したチェックのための配列をクリアしてから、シャッフルする前の状態を保存しておきます。このクリアは、すぐあとのコピーのために行っていて繰り返し遊ぶときに重要になります。上のようなシンプルなパターンでは、効果が薄いのですが、効果を発揮するのが次のパターン。

 

 もっと難しくする場合。

f:id:hiyokosabrey:20190211225802p:plain
 1~99 までの 25個の数字で遊びます。まんべん無く数字が使われるようにしたかったので25枚目のやつだけループ処理が終わってから乱数をセットしています。

 

 このパターンだと1~25のように パネルの番号とクリックの順番が一致しなくなるので、チェックしやすくするためシャッフルする前の状態が必要になります。

 そこで、チェックのところが、下のように変わります。

f:id:hiyokosabrey:20190211211051p:plain

配列から値を順番に0から取り出してチェックしてゆくので、変数StepCountをゼロ始まりに変更しています。

 

これで改造ポイント1~3完了です。

再生して数字の並びを確認してみます。

f:id:hiyokosabrey:20190211211323p:plain

一番小さい数字からクリックしていくのですが、これが結構難しくて、なかなか30秒切れなかった。

 

youtu.be

 

ここからはおまけです。

 

 上に貼った動画ですでに入ってますが、マウスのホバー処理とエフェクトを出してみます。

 クリックしたときにエフェクトを出せないかと実験してみたけど、ParticleSysytemは、Screen描画してるWidgetよりも手前に描画できないようなので、とりあえず数字がヒットしたタイミングでプリセットの爆発エフェクトをSpawn してみたら派手で面白かったのでそのまま動画を撮りました。

Spawn Emitter at Locationを一つ追加するだけ。(雑い・・・)

f:id:hiyokosabrey:20190212031548p:plain

 再生時のカメラの視界に入るように座標を調整してるだけ。カメラが動くと当然ズレますが何か? WidgetをWorldに置くか、エフェクトをRenderTargetTextureにしてWidgetで利用するしかない感じ?

 

 

 次はホバーエフェクト。当然タッチオペレーションだと無意味なやつです。マウスオペレーションならではですね。動画キャプチャにマウスカーソルが写り込まないので作ってみました。

 そのための仕込みとして、色を付けるための Image をキャンバスに追加します。

f:id:hiyokosabrey:20190212032926p:plain

 カラーは数字の色に合わせて5色用意したいのですが、カラーごとにアニメーションを作るのはナンセンス。というわけで間に1枚専用のパーツを追加して、Render Opacity でアニメーションさせよう、って腹です。カラーは数字の色と同様に配列を用意します。型はLinearColor型。

f:id:hiyokosabrey:20190212201636p:plain

(Font は SlateColor なのは何か理由があるのかな?地味に不便な気がする。)

 

この配列からカラーを取り出してセットする処理を 数字を受け取る関数に追加します。

f:id:hiyokosabrey:20190212202123p:plain

 

このあと、マウスカーソルが乗った時、離れた時、のイベントを用意するのですが、その前に、マウスカーソルが離れたとき用のアニメーションを作っておきます。

f:id:hiyokosabrey:20190212204021g:plain

 RenderOpacity が追加されたことで、Colorのフェードを触らなくていいのが嬉しいです。この RenderOpacity の初期値は 0.0 にしておきます。

 

あとは、マウスイベントをOverrideします。

f:id:hiyokosabrey:20190212204317p:plain

長いプルダウンリストから、 On Mouse EnterOn Mouse Leave を選択します。

 

On Mouse Leave は自身の上にマウスカーソルが乗ってる状態から、離れた瞬間に呼び出されるイベントです。

f:id:hiyokosabrey:20190212205626p:plain

ただ再生するだけでOK。

 

一方、On Mouse Enter は自身の上に マウスカーソルが乗った(入った)瞬間に呼び出されるイベントです。ここでようやく Render Opacity が 1.0 になります。

f:id:hiyokosabrey:20190212205940p:plain

このイベントが呼び出されたときに、アニメーションが残っている可能性があるので、強制的に止めるようにしています。

 これで、カーソルが乗った瞬間に Render Opacity が 1.0 になって、カーソルがはなれたら、0.0に向かってアニメーションするようになります。

 

このくらいでいいかな~と思ったのですが、もう一つ思いついたので作ってみました。

数字の配列を作る関数をちょっといじります。

f:id:hiyokosabrey:20190212212543p:plain

0~25までの 26個の数字を配列に入れるのですが、25個までと決めてあるので、この関数内だけで使えるローカル変数を使います。

f:id:hiyokosabrey:20190212212818p:plain

26個の数字から、一つだけランダムで抜いて25個したら完成です。

 

次に、数字パネルのWidgetに手を加えます。

こんなマクロを用意します。

f:id:hiyokosabrey:20190212213455p:plain

 もうお分かりですね。アルファベットバージョンです。

 しかも、大文字小文字が混在です。A~Z 26文字のうち、1文字だけ足りないので、ジジ抜きのような微妙な緊張感も一緒に楽しめるというやつです。

 

で、このマクロを無理やり↓挿しこみます。

f:id:hiyokosabrey:20190212213855p:plain

どんな感じかというと、

f:id:hiyokosabrey:20190212214114p:plain

ほどよい難易度でなかなか新鮮です。

 

 

 いかがだったでしょうか。ひとまず今回の改造はここまでにしておきます。

 始まりから終わりまで一つのゲームルールができると、いろいろアイデアも出やすい気がします。リザルト画面とかランキングとかネームエントリーとか作ると、どんどんアプリっぽくなっていきそうです。お手付きをカウントしたり一定の間隔以内だったらコンボボーナスとか。一定時間ごとに「急いで!」とか急かしてみたり。ヒント的にパネルが揺れたりしてもいいかもしれない。ベルトコンベアになってても面白そう。もうルールを変えて、何らかのペアをクリックして消しいくのもいいかもしれない。

 イマドキのUE4のトレンドとは逆行してる気がしないではないけど、まぁ楽しんで作れるのが何よりも一番大事だと思う。

 

 

ではでは

ステキはパネルクリックライフを!