はじめに
第10回UE4ぷちコン応募作の「ぷちラン」制作メモ、コースとUI編です。
前回の記事はこちらです。
今回は、スプラインメッシュを使ったコースの作成と、UI部分を書いてます。
スプラインメッシュでコースの作成
ラーニングにある「BPスプライントラック」をUE4.20にコンバートして使おうと思いプロジェクトを作ったのですが、肝心のメッシュが表示されない状態になってしまいました。
メッシュを表示するためには、どこをどのようにいじればよいのか読み解けなかったので、EPICさんの実際のチュートリアル動画を見て、それをそっくり真似して作り直しました。
おかげで、ある程度は仕組みが理解できたので、やっといてよかったです。動画の手順を追っただけで、英語の内容はわかってないのですが、なんとかなるのが動画のいいところですね～
www.youtube.com
動画の内容と4.20で違っていたのは、各ポイントの値を持ってくるノードでした。
動画では、Build Track Element（自作）関数内で、Get Local Location and Tangent at Sprine Pointが使われていましたが、スプラインコンポーネントから引っ張ってノードを検索すると、かわりに図のGet Location and Tangent at Spline Point ノードが出ます。その他の部分は特に問題なく動きました。
道のメッシュは自作しました。
１辺１ｍの立方体から変形して、エッジループを必要な分だけ追加してポリゴンを割っていきました。（最終的なサイズはUE4側で幅10ｍくらいになってます）
スプラインメッシュはスプラインに沿って曲がるので、ポリゴン割は多めにしておくのが良いそうです。
こちらの動画も参考にしました。いつもありがとうございます。
スプラインメッシュは、X軸正方向に伸びていくので、伸びる方向にあわせてポリゴン割を調整します。
メッシュのセンターはど真ん中にしてたのですが、ちゃんとスプラインにそって表示されていました。
メッシュは、「ふち」を強調したかったので、「ふち」の部分が細くなるようにポリゴンをわりました。さらに、この部分は別のマテリアルを割り当てました。
ちょっとハマったのがコリジョン設定です。
Collision Complexity の項目を、UseComplex Collision As Simple に設定します。これを忘れていたら、道のタンジェントの傾き具合で自動的にコリジョンが作られて、キャラが浮いたりめり込んだりしました。
スタートとゴールを自動で設置する
ゲーム内容としてはシンプルにまっすぐだけにして、ときどきコース幅で変化をつけようと思ったので、まずまっすぐ伸ばしました。
まっすぐ伸ばしてみると、コースの端から端まで極端に長くはないはずなのですが、行き来するのがとても面倒でした……。
なので、コースに関係するメッシュやコライダは、全部スプライントラックのBPの中に入れてしまって、自動的に配置されるようにやってみました。
スタートとゴール地点のトリガーと、スタートとゴールを示すラインのメッシュ、あとはコースの外側の背景になるメッシュです。動画で作ったメッシュ要素は、変数に格納してBPでくっつけるようになっているのですが、スタートやゴールの要素はスプラインコンポーネントの子にして直接配置しました。
コンストラクションスクリプトの、シーケンスにつけ足していきます。
スプラインの各ポイントのロケーションを取得する処理をつけたしました。
スタートは、０ポイントより＋１になるようにして、ゴールは逆に最後のポイントからマイナス１のところに設置するようにしました。なので、０と１しかないコースを作ると、ゴールが手前にあるという変な状態になります。
スタートとゴールを示すチェッカー柄のメッシュは、コライダの子にしてそのままくっついて動くようにしました。あと、コースの幅を変えたとき、その幅に合わせてチェッカーのメッシュのY軸のスケールを変化させるようにしました。コースの幅は、Road Data Arrayという構造体の配列に入っています。コースを伸ばすとスプラインのポイントが増えていき、そのポイント分配列の中身が増えていきます。ポイント毎にバンクさせたり、ガードレールを置いたりできるなど、なかなか便利なやつです。
そのRoad Data Arrayからスタートとゴールのインデックスの、コース幅の値を取ってくるようにしました。
汎用性はあんまり考えないで、値を取得して突貫工事っぽく設置したので、ループのトラックにすると不具合が起きそうです。しかし、これをやっておいたおかげで、コースを長くしても短くしても、自動でスタートとゴールが決まるので、検証が楽になりました。
スタートとゴールのトリガーには、オーバーラップのイベントをつけて、キャラがオーバーラップしたときに各種通知を飛ばすようにしました。
お知らせのウィジェット表示
「ふち」にいるかどうか、「ふち」をキープしているかどうかなどで、表示を変えています。
「ふち」の判定をしているところで、分岐ごとにイベント呼び出していけば良いかな～ などとのんきにかまえていましたが、相手はTickでした。
Tickなので、その瞬間にイベントを飛ばしたつもりでも、どんどん次のイベントがとびつづけてきます。
そのため、UIの表示は上書きされ続けるので、設定していたアニメーションも全く機能しない状態でした。
あたりまえですね……。
表示内容はウィジェットのBPで処理することにして、キャラのTickからウィジェットへインターフェイスで通知しました。Indexが数値だとわかりにくいのでEnumにしました。
ウィジェット側では、DoOnceでティックの流れをせき止める処理を追加しました。
前回表示したものと同じものが来たらDoOnceをリセットせずに流すので同じものが通りません。違うものになったらDoOnceをリセットして通します。
表示する内容は、データテーブルを使ってみました。今回の学習目的の一つでした。
内容は少ないので直接入力しました。テキストの内容と、サイズを変えるスケール値と色の情報を入れてます。
これの内容を、関数をつくって読み取ります。こちらのMozPacaさんのページを参考にしました。
mozpaca.hatenablog.com
あとはプレイヤーの付近に ConvertWorldLocationToScreenLocation を使って表示するようにします。
ロケーションのY軸にオフセットする値をたして、プレイヤーの下の方に表示されるようにしました。
時間の計測と表示
スタートからゴールまでの計測は、ゲーム時間をゲットするノードのGet Game Time in Seconds を使いました。
これは、ゲームを起動してからの経過時間になってるようなので、そのままではスタートからゴールまでの時間としては使えません。
ゲームを起動してからの時間はカウントされつづけているので、スタートの瞬間の経過時間を取っておいて、スタート時に引き算します。これで、スタートは０から開始できます。
この流れはGameModeに書きました。
スプライントラックのBPから、スタートを通過したら通知が来るのでそのタイミングでゲートを開き、ゴールを通過したら閉じるようにしました。
タイムの表示はウィジェットで、Textの変換ノードにあるオプションのMinimum Fractional Digitsと、Maximum Fractional Digits を両方３にして、小数点以下３桁に固定しました。これによって、表示位置が細かくブレずに安定しました。
シーケンサーのメモ
問題は、Properties の、When Finished の設定だったのです。
今回、シーケンサーからはじまって、ゲーム展開へつなぐような演出をやってみてわかったことがあったのでメモ代わりに書きます。
フェードインのトラックを入れてあるシーケンサーの再生が終わった後、また先頭に戻ってしまい、画面が真っ暗になる（フェードインの開始時になる）という事態に直面しました。ループにしているわけではなく一回だけの再生に設定していても先頭に戻りました。
調べてみたところProperties に、When Finished（終わったときに）という項目があるというのがわかり、これをKeep State に設定したことで問題がなくなりました。
Properties は、トラック上を右クリックすると出てくるメニューの一番上にあります。キーを右クリックではなく、なにもないトラック上を右クリックです。
ロゴについて
タイトルロゴも、公式ロゴからさっくりAdobe Illustratorでトレースして作りました。かつて「コン」だった部分は、パスをグリグリといじってランに変えました。
あとは、SVG形式で書き出してMODOで読み込み、スプラインカーブの状態からポリゴン化しました。ポリゴン変換時についでにリダクションして編集しやすくしました。
自動リダクションに頼ると、エッジが変な結線してシェーディングにシワができたりするので、それの調整に地味に時間がかかりました。
キャラはフローティングなので、「ふちラン」の状態で作りました。「ふちラン」は裏タイトルですが、応募する直前までどっちにしようか迷ってました。
おわりに
次に何か作るときは、ナイアガラに挑戦したいです。
今回のエフェクトはナイアガラで作ろうと4.20でプロジェクトを作り、いろいろ調べましたが挫折しました。たぶん、来年のぷちコンまでには正式リリースされてて、サンプルとかいっぱい出てくるんじゃないかと期待しております。
