ルーレットの作り方(6) 文字もプロシージャルに生成
imoue.hatenablog.com
これに色をつける
「色分けしてだいぶルーレットらしくなったんで、あとはルーレットのどの部分が何なのか、そこにあたったらどうなるのか？ というの文字を表示する。これができればもうルーレットだと胸をはって言える」
「扇形を3Dで作ってるから、文字も3D空間上に出せないと困る。そこで文字をブループリントウィジェット(UMG)として作って、それを3Dウィジェットとして表示する。これの使い方とか、なんでTextRendererじゃないのかとか、そのへんは去年の記事にも書いたはずなんだけど、よく覚えてないから思い出しながら作る」
「まずウィジェットを作る。左上に合わせて、必要なサイズがいくつなのかメモする。ウィジェットの大きさ自体を設定してもいい。デフォルトだとFullScreen(1280x720)という寸法だけど、Customに変えると小さくできる」
「まず手動でWidgetComponentを作って、ちゃんとウィジェトが表示できるかためす。ちょっと角度があれなので回転させる」
「こういう感じで、字はちゃんとでてる。ウィジェット編集とレベルに配置した時とで見た目が違うのが若干気になるけど……まあいいかってことで先に進む」
妹「いいの！？ だいぶ字がずれてるけど」
「よくはないんだけど……どっちもおかしいならともかく、片方だけだと原因わかりそうにないから。最終的にWidgetは動的に作ることになる。分割数を変えた時に対応できないから。となると、動的に作った場合はどっちの表示になるのか？ を確認する必要がある」
「扇形にくり抜いたPlaneコンポーネントを回転させてるから、そこにアタッチすることで、文字も同じように回転……というのが基本方針なんだけど、文字が大きすぎるとごちゃごちゃしてよくわからなかったりしたんで、文字は短くした方が調整しやすそう」
「そして最終的にはこんな感じになった。ウィジェット編集画面と同じように、指定した位置がウィジェットの中心がなるらしいのは確認できたから、あとは位置と角度を合わせて、それっぽく見えるように調整する」
妹「これはConstructionScriptでやるんじゃないの？ BeginPLayになってるけど」
「3DウィジェットはConstructionScriptでは作れないんじゃないかと思う。CreateWidgetノードが使えないとどうにもならなくて。なのでこの部分はBeginPlayに書いてるし、実行時にしか文字は出ない」
「問題はこれ、扇形の方はまっすぐ右からちょっと下側に伸びる感じなんで、角度を同じにすると文字の位置が扇の端っこになってしまったという。これはマテリアル側で、扇を描く角度を変えてもいいんだけど、あとあと判定する事を考えると、扇の方はそのままの方が楽だと思うので、文字の方をずらす」
「さらに改良したバージョンがこれ。Planeにアタッチするのをやめて、回転用にダミーのSceneコンポーネントを作って、そこからまっすぐのとこに文字を配置。Sceneを回転させると文字もぐるっと回転していくから、ややこしい計算をしなくても狙った角度に配置できる。扇形を回転させる角度の半分だけずらして、丁度真ん中を狙う」
「ダミーのSceneを入れてるのはこういう理由から。UE4の場合Vectorを計算するノードも多いから、そっちを使ってもいいんだけど、元々Planeコンポーネントを回転させてるから、同じやり方をした方が混乱しないかなと思ってこうしてる」
