妹でもわかるUnrealEngine4

毎日更新? 妹に説明するために書いてるけど、たまにわかってない場合もあるUnrealEngine4を中心としたゲーム制作の話。略すとイモリアル

毎日更新? 妹に説明するために書いてるけど、たまにわかってない場合もあるUnrealEngine4を中心としたゲーム制作の話。略すとイモリアル

UE4.16でのWebAssembly対応は隠し機能扱いに #UE4

f:id:una_unagi:20170525223308p:plain

「UE4.16の正式版が出てたんだけど、先日テストしていたWebAssembly版のHTML5パッケージ化ができなくなってた」

妹「なくなっちゃったの!?」

「設定項目はあるんだけど、普通にランチャーからダウンロードする版では使えない。UE4自体のソースコードをダウンロードしてきてビルドするという、エンジンの中身を改造する時と同じような手順が必要なかんじ」

妹「妹にはわからないやつじゃん。でも速くなってたし、なんで使えなくなっちゃったんだろ?」

「WebAssemblyの方は問題なかったけど、Preview版の時点でasm.jsでパッケージ化出来なくなってたのがちょっと気にはなった。正式版だとasm.jsでのパッケージ化と実行は問題なかったから、そのへんひっくるめて元に戻したのかも」

f:id:una_unagi:20170525223319p:plain
f:id:una_unagi:20170525223327p:plain

「あとアップデート情報は、Epicの英語ブログで見られるんだけど、日本から見ようとするとエラーになるから、フォーラムの分を見る方が楽。たぶん対応する日本語版の記事がないからバグってるんで、出れば正常になると思う」

forums.unrealengine.com
公式フォーラムにあるアップデート情報

forums.unrealengine.com
最新機能についての日本語情報

クリックした時のエフェクトは大事 #UE4

f:id:una_unagi:20170524231058g:plain

「無事アニメーションの作り方も思い出したので、ボタンをクリックした時のエフェクトを入れた。これがないと押せたのか押せてないのかわからないから、ものすごくストレスがたまる」

妹「ボタンウィジェットには最初から反応して絵が変わるやつなかったっけ? へこんだりとか」

「今回はボタンは透明にして、ボタンと同じ大きさの絵を置いてるだけだから。ボタン特有の反応はない。そうしてる理由は、後でキーボード操作に対応する可能性があるのと、絵の部分が別になってれば後でSpriteStudioとかで差し替えたくなった時にやりやすいという考え」

f:id:una_unagi:20170524232021p:plain

「エフェクトの中身についてはこんなかんじ。シンプルにボタンの絵自体を動かしてもいいんだけど、同じ絵を大きさや透明度、あと角度なんかを変えて重ねると、ちょっと派手な感じになる。素材の数を増やさなくていいっていう利点もあって、わりとよく使われてる手法。場合によっては3枚とか4枚とか重ねることもある」

妹「同じ絵を出すというのは、どういう風にやってるの?」

「特に何もしてない。Imageウィジェットを2枚重ねておいて、同じ画像を設定しただけ。通常時は2枚同じ大きさで重なってるから見た目にはわからない。もっといい方法もあるかもしれないけど、とりあえず見た目はこれでOK」

f:id:una_unagi:20170524231506p:plain

imoue.hatenablog.com

「アニメーションの再生はボタンのクリックイベントに入れた。先週作ったイベント用ディスパッチャーの呼び出しが仕込んであるから、その後ろに足しておいた。これでとりあえずボタンをクリックした時の処理をやったあと、クリックしたエフェクトも出るようになった」

妹「たしかに押してる感じはする」

「できれば音も欲しい。スマートフォンのゲームだと、ゲームに関係ない場所をタッチしてもエフェクトが出ることが多い。タッチパネルだとカーソルが見えなくて、タッチしたつもりの場所とスマートフォンの読み取りがズレてる場合があるから。自分の感覚を補正するのに役立つ」

妹「ゲームのコントローラーみたいにカチっと押せないから、たしかに押してるのかどうだか心配になる時あるね」

「とはいっても、毎回レベルアップとかボス撃破みたいな演出が出てきたらうっとうしいから、押せてることが間違いなくわかる、でも邪魔にならない程度の、軽いエフェクトがいいと思う」

UMGのアニメーション復習 #UE4

f:id:una_unagi:20170523225358g:plain

「今日はちょっとボタンのアニメーションをやる。UMGのアニメーションは前にもやったんだけど復習しながら」

docs.unrealengine.com

f:id:una_unagi:20170523230123p:plain

f:id:una_unagi:20170523225654p:plain

(1) どのウィジェットの、どのパラメータを動かすか考える(RenderTransform欄を使うのが望ましい)
(2) アニメーション欄に新しいアニメーションを追加
(3) タイムラインの緑と赤の細いバーを動かして、アニメーション全体の長さを決める
(4) パラメータを変化させるタイミングに合わせて、タイムラインの上下に茶色の矢印が付いたバーを動かす
(5) パラメータを変化させて動きを付けて、その横にある変なボタンを押して、タイムラインに記録
(6) 適当にバーを動かして動きの確認
(7) 4~7の手順を繰り返して調整する。必要に応じて3も
(8) 終わったら、アニメーション欄で、何もアニメーションを選択してない状態にして保存

「だいたいこのような手順になると思う。いわゆるタイムライン方式で、キーフレームとキーフレームの間は自動的に補間されて、細かく動かしたい時は細かくキーを作ってという」

妹「RenderTransformのところじゃないとダメなの? 他にも変なボタン付いてるパラメータいっぱいあるけど」

「最初はサイズXとかサイズYとかを操作してたんだけど、それだと拡大縮小の基準点が左上から変えられなくて、しかもキャンバスからはみ出した部分がカットされてしまった。RenderTransformのところを使うと一番しっくりくる結果になる」

limesode.hatenablog.com

「あと(8)も大事で、前に見たブログに書いてあって、やらないといけないのはわかってたんだけど、それでもうっかり忘れて失敗してしまった」

妹「失敗するとどうなるの?」

「アニメーションした時だけ大きくしたかったのに、その大きい状態がデフォルトとして保存されちゃったみたいで、最初から絵がでっかい状態になってしまった。アニメーション用の編集と通常の編集の区別があやふやな感じ」

※昨日はお腹が痛すぎたので休みました