週刊IM@Study Vol.4 と アイマスハッカソン2019の続き

こちらはアイドルマスター Advent Calendar 2019の10日目の記事です。

12/5のアイマスハッカソン2019にご参加いただいたみなさんありがとうございました。
そして、関東・関西のスタッフさん、お疲れ様でした！

10時から行われていた本イベントですが、18時からの成果発表・プロデューサーLT大会の様子はこちらでご確認いただけます。


アイマスハッカソン2019 in 東京&関西 成果発表・プロデューサーLT

そこでは週刊IM@Studyの寄稿内容の概要について発表しました。僕が発表してる部分はこちら↓

https://youtu.be/SMEKvULOnvc?t=4055

発表している対象についてはこちらを見てもらったほうが早いかもしれません。

「UE4でアイマス楽曲をさらに盛り上げてけ☆」と題しまして、UE4で楽曲のビジュアライズ的なことをしています。
こんな感じでUE4の簡単な説明をし、操作方法を学びつつ詳しく編集を説明しています。

f:id:crssnky:20191209232153p:plain

今回はUE4のエディタ機能のみを使用しているため、C++を1字も書きません。その代わりにBlueprintを引いてもらいます。世の中の評価としても、エンジニア以外にも簡単に使えるというものということで普及しており、フローチャートとだいたい同じと考えても良いと思います。

f:id:crssnky:20191209232929p:plain

もちろん、C++に慣れた方には少し煩雑かもしれませんし、C++と比べて関数呼び出しが死ぬほど遅いといったデメリットもあります。しかし、小さなプロジェクトであったり、大きなプロジェクトでも用法を正しく使えば開発イテレーションを大幅に上げることのできる素晴らしいツールです。

そんなUE4のハンズオンや他3本の記事、ミニコラム3本が詰まった100ページに及ぶ週刊IM@Study Vol.4は、第2回技術書同人誌博覧会で頒布されるので、ぜひお手にとってみてください。Vol.3の時にあった電子決済に引き続き対応している他、電子版も頒布されるので、100ページの本は...という方もぜひどうぞ！

f:id:crssnky:20191208214932p:plain

gishohaku.dev

さてお話は変わり。
Youtubeコメでもありましたが、今回はスライドソフトにUE4を使用しています。
UE4上でスライドを表示することで、シームレスにデモへ移行することができました。
スライド自体は前日に作っており、当日はそのシステムを作ってたので今回はそれについてもお話しようかと思います。

Step 0　スライドを作る

なんの変哲もないです。僕はPowerPointで作りました。

アイマスハッカソン2019in関西 - Speaker Deck

作り終えたら、各ページを画像出力してください。パワポにはそういう機能あるし、Webサービス使わなくて良き。

f:id:crssnky:20191210001222p:plain

Step 1　UE4に取り込む

テクスチャとして取り込みます。なんとなくそんな気分なので、Mipmapは作りません。 f:id:crssnky:20191210230824p:plain

Step 2　Materialを作る

テクスチャパラメータのノードを一つ持つMaterialを一つ作ります。
ハッキリ見えてほしいので、Unlitです。 f:id:crssnky:20191210231117p:plain

Step 3　スライドBPを作る

ConstructionScriptで全部仕上げます。
InstanceEditableなInt型変数からどのTextureObjectを使うかを分岐し、Step2で作ったMaterialからMaterialInstanceDynamics(MID)を作ってそこにTextureObjectを投入します。

f:id:crssnky:20191210231502p:plain

f:id:crssnky:20191210231534p:plain

ConstructionScriptで済ますことで、Levelに配置した後でもぐりぐり～って変えられます。

Step 4　スライドLevelを作る

逆に言えばConstructionScriptで作っちゃったので、Levelが開始してしまったら変更ができません。せっかくなので、LevelStreamingを試してみたいし、良い感じにしましょう。
まず、ﾃｷﾄｰにスライドBPが一つだけあるレベルを量産します。各BPは順番に四角の各辺をなぞるように配置します。

  • Slide1はx,y,z=1000,0,0・Pitch,Yaw,Roll=0, 0, 0
  • Slide2はx,y,z=0,1000,0・Pitch,Yaw,Roll=0, 90, 0
  • Slide3はx,y,z=-1000,0,0・Pitch,Yaw,Roll=0, 180, 0
  • Slide4はx,y,z=0,-1000,0・Pitch,Yaw,Roll=0, 270, 0

みたいな感じ

f:id:crssnky:20191210233303p:plain

スライドの数だけ...スライドの数だけ....多い....

f:id:crssnky:20191210233133p:plain

Step 5　LevelStreamingを整える

"HackathonPersistant"的な名前のパーシスタントレベルを作り、Levelsウィンドウで下にぶら下げます。
今回は、スライド以外にもデモ用のレベル(Test)もぶら下げています。

f:id:crssnky:20191210234320p:plain

Step 6　LevelBPを書く

次へキー・戻るキーを設定し、それのイベントに紐づけて次のスライドを持つレベルをその場で読み込むBPを記述します。Timelineノードを使えば、良い感じにカメラを回すことも出来ます。

f:id:crssnky:20191210234605p:plain

f:id:crssnky:20191210234705p:plain

Step 7　試す

LevelStreamingによって、必要なスライドのみが違和感なく読み込まれてることが確認できます。とってもメモリに優しいですね！！

こんな感じでアイマスハッカソン2019ではスライドを流していました。これを使い回せば、UE4で作ったものを簡単に見せられますね！

お詫び

WebRemoteControlの発表を書きたかったのですが、本日公開されたUE4.24でも難しいみたいです...