当たったらどうすんだよ

当たらなければどうということはない

UE4のテンプレートに自分で作ったキャラを入れて動かしたい そのナナ

ついにUE4のテンプレート(プロジェクト)に自作キャラのFBXをインポートしますよ!

それではまず、本連載の第2回で作成した(はずの)UE4プロジェクトを開きましょう。EPIC GAMESランチャーに登録されているはずなのでライブラリからダブルクリックなどで起動してください。

本エントリではUE4エディタそのものについての操作説明はしません。UE4エディタの基礎についてはランチャーにチュートリアルがついていますし、ちょっと検索すると多数のブログ記事や動画が見つかると思います。

f:id:kanianthi:20160605172156j:plain

続いて

  1. コンテンツブラウザでルート(一番上の)フォルダに移動する。
  2. 左にある緑色の「新規追加」ボタンでフォルダを追加する。
  3. フォルダ名を好きな名前(キャラ名がいいですよ)にする。画像では「Statue」を作成しました。

以上が下準備です。

ぶっちゃけ、コンテンツフォルダ内のどこにでもFBXからメッシュやアニメーションを読み込むことはできます。しかし、そういう雑なことをやっていると後で何がどこにあるのか分からなくなったり、不要なアセットを整理したいときになにが不要でなにが必要なのか分からなくなってしまいます。

ですのでフォルダ階層をどのように構築し、自分で作成したデータを管理すれば良いのかなども、プロジェクトのテンプレートを参照すれば一目瞭然ですので真似しちゃいましょう。

FBXをインポートするよ!

f:id:kanianthi:20160605173447j:plain

↑これも第2回で書いた通り、FBXのインポート設定は画像の通りです。

先ほど作ったキャラ名をつけたフォルダ内にインポートしてください。

f:id:kanianthi:20160605174109j:plain

正常にインポートが終われば↑のようになっているはずです。

画像で選択反転表示されているアイコンの下にマゼンタのラインが入ったアセットがBlenderなどで作成したメッシュです。途中真っ黒なアイコン下部に暗い緑のラインのアセットはBlenderでアクション登録したそれぞれのモーションになります。

ちなみにぼくが知る限り、Blenderから吐き出すFBXだけがこういう風にアクションをまとめて出力できる感じでとても便利です。
※ぼくが知らないだけでMayaやその他でも同じことできるぜ!ってときは教えてくださいねw

説明を続けると茶色くて「ショボーン」てな感じにうなだれているガイコツのアイコンはUE4内で物理的な判定を行うためのPhisicsアセットです。その隣の水色ラインのついたTポースなガイコツはスケルトンてそのまんまなので「骨」です。最後に下段一番右にある「MT」が末尾についたアイコンはマテリアルですね。

ちなみにこれらのアイコン表示された「アセット」はそれぞれがデータでありノードでもあります。(今けっこう深いこと書いたなw)

それでは次に、マテリアルを設定し、フォルダを作ってアセット管理の体制を整えましょう。

必要なフォルダは、

  • Texture
  • Animation
  • Material

くらいでいいでしょうかね。

慣れてくると「Blueprint」とか「Mesh」などなど、格納するアセットごとにフォルダを増やしたり整理したくなりますが今はこんな感じで。

大量にインポートされたアニメーションのアセットはWindowsなどのエクスプローラー画面で出来るのと同じように、最初と最後をshift選択すれば一括で選択できます。

f:id:kanianthi:20160605180053j:plain

うまいことアセットを整理するとこんな風にコンテンツブラウザがすっきりするはずです。やった!

とりあえずレベル内にキャラを置いてみる

それではいきなりですが読み込んだキャラクタメッシュをコンテンツブラウザ内で選択し、そのまま3Dビューにドラッグドロップしてみてください。

f:id:kanianthi:20160605180528j:plain

すると「!!!」なんだよいきなりステージ内にすたちゅーさんが!!

まだマテリアルをきちんと設定していないので真っ白ですが、とにかく自分で作成したキャラクタメッシュがいとも呆気なくUE4のレベル(ゲームマップ)の中に表示されたことが分かると思います。

では調子に乗って、先ほど作成したAnimationフォルダに放り込んだはずの、それぞれのアニメーションアセットも同じ調子でドラッグドロップしてみましょう。

f:id:kanianthi:20160605181054j:plain

↑なんてこったやべー!すたちゅーさんが大量発生!!??

という具合に、アニメーションアセットをそのままステージにドラッグドロップでぽいぽいできることが分かりました。

それでは続いて、3Dビューの上にある「ビルド」というボタンを押してレベルをビルドしてみてください。この処理を行うことで、UE4は光と影を焼き込んだり、ナビメッシュというbotが歩き回るためのデータを作成したりという「ゲームをリアルタイムで表示するための前処理」を行ってくれます。

しばらく待つとビルドは終了しますので、ビルドボタンの隣にある「プレイ」を押してUE4マネキンさんを動かし、ステージを歩いてみましょう。

f:id:kanianthi:20160605182014g:plain

↑素晴らしい!白無垢のすたちゅーさんたちが動き回っています。

このように、Blender(など)でキャラクタを作成してモーションをつけ、UE4にインポートすることはそんなに難しい作業ではありません。

しかも「UE4を使って動画を作成することが目的」であれば、ダンスでも格闘でもその他の演技でも、Blenderですべてのアニメーションを作成してFBXに書き出し、UE4にインポートして適切な位置に放り込めばあとはプレイボタンを押すだけで完成です。

もちろん、動画を作成するならライティングや背景、その他の小道具やカメラも用意してマチネや新機能のシーケンスエディターにも触る必要はあるでしょう。しかし、用意するべきアニメーションとしては「Blenderなどで作成したアニメそのまんま」で良いわけです。

それでは今回の最後、マテリアルを設定しましょう。

せっかくだからマテリアルインスタンスに!

というわけで、まずは先ほど作った「Texture」フォルダにコンテンツブラウザで移動しましょう。

続いて、FBXをインポートしたときと同じように、インポートボタンを押して、ぼくが作成した(または自分で作成した)テクスチャを読み込みます。

f:id:kanianthi:20160605183030j:plain

テクスチャ画像に限ったことではありませんが、UE4エディタはWindowsエクスプローラーなどから直接ファイルをドラッグドロップすることでもアセットを読み込むことが可能です。また、複数ファイルを同時にインポートさせることもできますので、けっこう「つかえる子」という感じですね(褒めすぎ?)。

注意事項として、UE4でもなんでもそうですが、どんなフォーマットの画像でも読み込めるわけではありません。特にZbrushユーザーだとやたらお世話になる「tiff」フォーマットの読み込みはUE4ではできません。PNGやTGA、あるいはPSDをそのまま読めますのでテクスチャ画像のフォーマットには注意してください。

続いて、先ほど「Material」フォルダに放り込んだはずのマテリアルをダブルクリックしてください。

f:id:kanianthi:20160605184308j:plain

するとBlenderでいうノードエディターと同様の、マテリアルエディターが開きます。

最初はマテリアルノードと、初期色の白を指定したベクターパラメーターノードが重なっていると思いますのでドラッグして見やすいように配置し、コンテンツブラウザでテクスチャフォルダに移動して、テクスチャ画像をそのままドラッグドロップしてみましょう。

なんと!画像をマテリアルエディターにドロップするとそのままTexture Sampleというノードに化けましたね!素晴らしい!

画像ではNMつまりノーマルマップをドロップしたところなので、ノードのソケットから「ノーマル」に接続します。そして同じように、TM(ディフューズマップ)などもポイポイしてスポっと繋げばマテリアルの出来上がりです。

f:id:kanianthi:20160605185236j:plain

↑が、このいい加減マテリアルの完成形です。

テクスチャマップをノードにしてつないだだけのものですが、とりあえず「適用して保存」するとすたちゅーさんの見た目が変わっているはずです。

f:id:kanianthi:20160605185615j:plain

はい、できました。ばっちり!

いやいやww現状ラフネスやメタリックなどになにも値を入れていないので少しばかりテカテカしていますが…なにはともあれすたちゅーさんらしい外観にはなりました。

初歩的とはいえ、これでマテリアルも作成できたので、最短距離を進むのであれば、あとはいよいよプレイヤーキャラとしてすたちゅーさんを動かすための工程に進むのですが、せっかくですので少し手間を加えて、マテリアルにバリエーションを出してみませんか?

え?そんなん面倒くさい?

はい…それでしたら無理強いは言いませんよ…。この後をすっ飛ばして次回の記事を読んでいただければ、無事にすたちゅーさん(または自作キャラ)が動かせるようになります。

なので、ここから先は「ついでだから付き合ってやるか!」という方のためだけに書いておきますね。

f:id:kanianthi:20160605190459j:plain

  1. ベースカラーに接続したTextureSampleノードをいったん削除する
  2. コンテンツブラウザでTMテクスチャを選択する(選択するだけ)
  3. マテリアルエディタの空いているところでマウスを右クリック
  4. なにやらダイアログが出てくるので、検索ボックスに「parameter」などと入力する(全部タイプしなくても候補がフィルターされます)
  5. TextureSampleParameter2Dを選択する

f:id:kanianthi:20160605191059j:plain

以上の手順で「MaterialExpressionTextureSampleParameter2D-1」という破滅的に長ったらしい名前のノードが出現します。ウザい!早速左側の「詳細」タブでParameter Name欄を書き換え「Diffuse」とかにしちゃいましょうw

このノードにどんな意味があるのか?というと、テクスチャ画像をパラメータ化するので「後から変更できるよ!」というそれだけのノードです。なんだよそんな当たり前のノードかよ!ってくらい、コケおどし的に長い名前だったわけですがそれにはワケがあります。

今作っている「普通のマテリアル」は、UE4においてはいちいちコンパイルをしないと色やテクスチャの変更を反映できないのです。つまり「徐々に明るさが変わるランプ」とか「ゴジラの背びれ」みたいに点滅するマテリアル表現ができません。

そこで、あらかじめ「親マテリアル」で後から変更したいノードを「パラメーター化」しておきます。そして「子マテリアル」をインスタンスとして作成し、この「マテリアルインスタンス」を実際のメッシュやキャラクタに適用することで、時間とともに色が変わるマテリアルなどを実現しているのです。

f:id:kanianthi:20160605193244j:plain

↑最終的にこんな感じにベースマテリアルのノードを組みました。

  1. さっき作ったディフューズテクスチャノードに「Multiply(乗算)」ノードを追加して接続
  2. 最初にあった色指定のパラメータノードを「ColorTint」と名前変更して上のMultiplyノードソケットに接続
  3. 空きスペースで右クリックし、同じく「parameter」と入力して検索し「ScalarParameter(スカラーパラメーター)」ノードを追加する
  4. スカラーパラメーターノードの名前を「Roughness」などと変更し、マテリアルのラフネスソケットに接続する
  5. 上のラフネス指定ノードを普通にコピペして名前を「Metalic」に変更し、マテリアルのメタリックソケットに接続する

以上で親マテリアル(ベースマテリアル)のパラメーター化は終了です。慣れてしまえばどうということはない作業ですが、マテリアルノード初心者だと大変ですね。おつかれさま!!

それではベースマテリアルができたので、マテリアルインスタンスを作成しましょう。簡単です。

f:id:kanianthi:20160605194215j:plain

↑今設定した親マテリアルを右クリックして「マテリアルインスタンスを作成」を選択するだけ!

今回はマテリアルインスタンスを二つ作成し、それぞれ「bStatueMT-normal」と「bStatueMT-Itachi」にしました。

f:id:kanianthi:20160605194852j:plain

マテリアルインスタンスを二つ作りましたので「Itachi」のテクスチャを変更しました。ColorTintで色を変更すれば「2Pカラー」みたいなことも比較的簡単にできますよ。

今回の成果!

f:id:kanianthi:20160605195352j:plain

それでは今回の成果です。

3Dビューで直接メッシュ(アニメーション)を選択し、右側パネルの「詳細」タブで「Materials」から今ほど作ったマテリアルインスタンスを設定しましょう。

ふつうのすたちゅーさんと落書きされたすたちゅーさんが表示されれば成功です。

やりましたね!

次回は、いよいよ最終工程である「プレイヤーキャラとして自作キャラを動かす」に突入です。簡単だけどね!w