ヽ｜∵｜ゝ(Fantom) の 開発blog？

　ゲームエンジンいじり始めたら、とりあえずやってみたいのはキャラを動かしてみることかな～って感じで、無料で使える「Animation Starter Pack」と「Infinity Blade Warriors」のライブラリを試してみた。キャラを動かすブループリントは自分で作っても良いのだが、アニメーションスターターパック(Animation Starter Pack)にはデフォルトのキャラを動かすブループリントが入っているので、それを使ってサクっと動かしてみる方法。あくまでラーニング目的なので、設定はほぼデフォルトのままのため、必要あれば調整は各自で色々やってみて欲しい。


※ UE4.9.2/Windows で確認

---

■まずは下準備とキー入力設定
　適当に新規プロジェクト(4.9以降)を作ったら、マーケットプレイスから「Animation Starter Pack」と「Infinity Blade Warriors」をダウンロードして、プロジェクトに追加しよう。できればキャラが動きまわりやすいように、「新規レベル」で新しくレベルを作って、大きな床(Floor)でも作って置くと良い。また、キー操作で自由に動かすためには入力マッピングを行う必要がある。既に設定してある場合は「■キャラクターを動かす」まで読み飛ばしても良い。



１．レベルエディタのツールバーで「設定＞プロジェクト設定...」を開き、左のメニューから「エンジン＞インプット(入力/Input[※項目名はバージョンや設定言語で異なる場合があるので適宜解釈して欲しい])」をクリックしよう。ここではキー入力とその名前を紐付けする設定をする。名前はブループリントでも使うので、わかりやすい名前にしよう。ここでは既存のブループリントで使っている名前であり、よく使われるキーとしても設定してある(右上にある「エクスポート...」でファイルへ保存しておくと再利用できる)。設定のしかたはそれぞれの項目の横にある「▼」をクリックで開き、「＋」ボタンを押すことにより、名前とキーを設定できるようになる。「Axis Mapping」(軸マッピング)の値は、「上、前、右」方向には正の値(1.0)を、「下、後ろ、左」方向には負の値(-1.0)を設定しておくと良いだろう。設定はゲームによって適当に変えても良い。ちなみに「Action Mappings」はジャンプのように毎回ボタンを「押す・離す」ような操作、「Axis Mappings」は方向キーのように押している間、常に入力されているような操作(ゲームパッドのアナログスティックなど)に使う。

●入力マッピング設定例




２．入力マッピングが済んだら、設定画面を閉じ、今度は独自のキャラを表示させるために「GameMode」の設定をしよう。レベルエディタのツールバーで「設定＞ワールド設定」で設定タブをを開き、「GameMode＞GameMode Override」の横にある「＋」を押して、新しい GameMode を作ろう。保存ダイアログが出たら、適当な名前を付ければ良い。ちなみに GameMode とは、使用するキャラクター(Pawn)やその操作方法など、そのレベルに使ういくつかの設定をまとめたものと考えれば良い。



３．新しい GameMode を作ったら、「選択したゲームモード」を「▼」を押して開き、今度は「Player Controller Class」横にある「＋」を押して、新しい Player Controller を作ろう。GameMode と同じように名前を付けて保存すれば良い。



４．Player Controller を新しく作ったら、自動的にエディタが開くと思うが、開かなかったら、コンテンツブラウザで「Blueprints」フォルダ（先ほど保存したフォルダ）に「MyPlayerController」（先ほど付けた名前）にファイルがあると思うので、ダブルクリックしてエディタを開こう。開いたら詳細から「マウスインターフェイス＞Show Mouse Cursor」をオンにしておく。これは文字通りマウスカーソルをゲーム中に表示する項目だ。必須ではないが、製作中はカーソルがあった方がわかりやすいだろう。ゲームが完成したら、オフにするのをお忘れなく（カーソルが必要なゲームでない場合）。コンパイルして保存しておこう。



　とりあえずここまでで、下準備は完了だ。すべて保存して次に進もう。

---

■キャラクターを動かす

　次にキャラクターを動作させるベースを作りたいのだが、これは手抜きして既存のブループリントをそのまま利用してみよう。

１．コンテンツブラウザで追加したアニメーションスターターパックのライブラリ「AnimStarterPack」のルートフォルダを覗くと、「Ue4ASP_Character」というブループリントがある。これを右クリックしてメニューを出し、「子ブループリント クラスを作成します」を実行しよう。すると「Ue4ASP_Character」を継承したファイルが新しく作成されるので、適当に名前を付けよう。ここでは「IB_Character」としておいた。またこれは「InfinityBladeWarriors＞Character＞CompleteCharacters」フォルダに移動しておこう（ドラッグドロップだと簡単）。



２．ファイルを移動したら、「IB_Character」をダブルクリックしてエディタを開こう。すると UE4 のデフォルトのキャラクターが表示されたと思うが、コンポーネントの「Mesh」をクリックし、詳細から「Mesh＞スケルタルメッシュ」を「SK_CharM_Warrior」に変更しよう。これで見た目が変わったハズだ。コンパイルして保存しておこう。


３．キャラを変更したら、ここで少しだけ動きを確認しておこう。レベルエディタに戻って、ツールバーから「設定＞ワールド設定」を開き、ここで先ほど作成したキャラクター用のブループリントを設定してみよう。「GameMode＞選択したゲームモード＞Default Pawn Class」に「IB_Character」に変更する。設定し終わったら、ツールバーからプレイしてみよう。ポーズは不自然だが、とりあえずは動いたハズだ。



　次にアニメーションをキャラで利用できるようにしてみよう。

---

■スケルトンをリターゲットする

　本来、キャラのアニメーションはそれ専用のもので、別のキャラには使えないのだが（手足の長さや体の大きさなどはキャラごとに違うわけで）、幸いにも「人型」のような共通の構造を持ったスケルトン(骨)なら、リターゲットしてくれる機能がある。今回使った「Animation Starter Pack」は UE のデフォルトキャラクターのものだが、これを「Infinity Blade Warriors」用に設定し直せばいいというわけだ。それをやってみよう。

１．コンテンツブラウザで「Infinity Blade Warriors」のライブラリが追加されているフォルダ「InfinityBladeWarriors＞Character＞CompleteCharacters」を開こう。そしてここにある「SK_Mannequin_Skeleton」がリターゲットさせるスケルトンだ。これをダブルクリックして、エディタを開こう。



２．エディタが開いたら、ツールバーにある「リターゲットマネージャー」をクリックする。するとリターゲットマネージャーのウィンドウが開くので、この中の「リグを設定＞リグを選択」のプルダウンメニューを開く。そこで「デフォルト＞ヒューマノイドリグを選択」を選択しよう。するとそのすぐ下の「ノード(リグ)」「ボーン(スケルトン)」に名前が自動的に設定されたと思うが、そのままでいいので、このウィンドウを閉じ、ツールバーで保存する。このエディタは閉じて構わない。



３．次に再びコンテンツブラウザに戻り、今度は「Animation Starter Pack」のライブラリが追加されているフォルダ「AnimStarterPack＞UE4_Mannequin＞Mesh」を開こう。ここにアニメーションで使われているスケルトン「UE4_Mannequin_Skeleton」がある。これもダブルクリックしてエディタを開き、先ほどと同じようにツールバーから「リターゲットマネージャー」を開き、「リグを設定＞リグを選択」のプルダウンメニューから「デフォルト＞ヒューマノイドリグを選択」を選択してウィンドウを閉じ、ツールバーで保存する。このエディタも閉じてしまって構わない。



(※) 実際のところ、ノードの名前（リグ）は製作者によって違ったりするのだが、今回用いた「Infinity Blade Warriors」はそのまま同じ名前が使えるので、簡易テストとして利用した。「Mixamo Animation Pack」などを使いたい場合は、リグの名前を自分で設定する必要がある。詳しい方法は公式のオンラインマニュアルを読むと良いだろう。

（参考）
・アニメーション リターゲット（異なるスケルトン）


４．リターゲットマネージャーで設定し終わったら、今度は実際にアニメーションをリターゲットしてみよう。コンテンツブラウザでアニメーションスターターパックのルートフォルダ「AnimStarterPack」へ移動し、そのフォルダ内にあるアニメーションのファイルを一番上から下まで、全選択をしよう(Ctrl-A)。全選択するといくつか余計なものが入るので、[Ctrl]キーを押しながらクリックで、「UE4_Mannequin」フォルダ、「Showcase」(レベル)、「Ue4ASP_Character」(ブループリント)、「UE4ASP_HeroTPP_AnimBlueprint」(アニメーションBP)を選択から除外しよう。そしてどれでもいいので、選択しながら右クリックメニューを出し、「Animアセットをリターゲットする＞Animアセットとリターゲットを複製する」を実行する。



５．リターゲットを行おうとすると、ダイアログが出てくるので、「このアセットと再マッピングするスケルトンを選択する」以下に表示されている名前のリストから「SK_Mannequin_Skeleton」をクリックしよう。これは先程「リターゲットマネージャー」でリグを「Humanoid」にして保存したものだ。右側に Infinity Blade Warriors のキャラが表示されればOKだ。下の方にある「選択」ボタンを押せば実行される。



６．ここまで来ればあと一息だ。あとはアニメーションブループリントもリターゲットしよう。今度は「UE4ASP_HeroTPP_AnimBlueprint」(アニメーションBP)を選択して右クリックし、メニューから「Animアセットをリターゲットする＞Animアセットとリターゲットを複製する」を実行する。ダイアログが出たら、「SK_Mannequin_Skeleton」をクリックして、下の方にある「選択」ボタンを押すのは先ほどと同じだ。



７．リターゲットを実行したら、対象のスケルトンのあるフォルダ「InfinityBladeWarriors＞Character＞CompleteCharacters」に大量にリターゲットされたアニメーションのコピーが作成されているので、一旦すべて保存してしまうと良い。コンテンツブラウザの上にあるボタンを使うと楽だろう。



８．そして先ほどリターゲットしたアニメーションBP「UE4ASP_HeroTPP_AnimBlueprint_Copy」は少し名前が紛らわしいので「IB_HeroTPP_AnimBlueprint」とでもリネームしておこう。



９．最後にリターゲットしたアニメーションBP「IB_HeroTPP_AnimBlueprint」を、「■キャラクターを動かす」で作ったキャラクターベース「IB_Character」に設定しよう。コンテンツブラウザの検索で探しても良いが、「ワールド設定」の「GameMode＞選択したゲームモード＞Default Pawn Class」に設定した「IB_Character」の横にある虫眼鏡のアイコンを押すと、自動的にフォーカスを当ててくれるので簡単だ。見つけたらダブルクリックしてエディタを開こう。



10．エディタが開いたら「詳細」だけでも構わないが、ブループリントエディタに切り替えて、「ビューポート」タブを押し、「コンポーネント」から「Mesh」をクリックしよう。「詳細」で「Animation＞Anim Blueprint Generated Class」のプルダウンをクリックし、作ったアニメーションBP「IB_HeroTPP_AnimBlueprint」を選択しよう。するとキャラが身構え、動き出したハズだ。コンパイルして保存しておこう。とりあえずはこれで完成だ。プレイして確かめてみよう。



　実のところを言うと、ジャンプはモーションだけで上手く飛べてない感じなのだが、アニメーションBP「UE4ASP_HeroTPP_AnimBlueprint」を開いてみると、色々ブループリントが組み込んであるので、改造してみると良いかも知れない。また、キャラを変えたい場合は、キャラクターベース「IB_Character」から子ブループリントを作成し、メッシュだけ変えるのが一番簡単だ。これだけでも、入力マッピングや GameMode、Player Controller、Character ブループリント、アニメーションブループリントなど、最低限必要なものがわかって来るだろう。自分で作る場合は、新しくブループリントを作るとき親クラスを「Character」にして作り、「UE4ASP_HeroTPP_AnimBlueprint」から必要なものだけコピペするなどもできる。この辺りから自分で色々試してみると、それぞれのコンポーネントの機能の理解が深まると思う。

---

　UE はまだ無料化されてから約半年ちょっとだからか、ブログ記事なども Unity から比べるとずっと少ないのが残念。ググッても公式オンラインマニュアルばかりで、ページが多岐にわたり、調べづらい所が難点かな。翻訳も直訳っぽくてよく意味がわからないものも多いしね。ブループリントも 4.7 から 4.8 で結構変わったようで、そのまま使えないものもあったりする。多くの場合、有志が作ったWikiやブログの方がやりたい事のテーマごとにまとめてあったり、一生懸命伝えようと工夫してあったりするので、わかりやすいことが多いんだよね。私もよく利用させてもらっている。まぁ、今後ユーザーが増えて情報が多くなるよう期待！

　余談だが、UE でユニティちゃんを動かしている例もある。ライセンス的な質問の所を見てみると、「ぶっちゃけ別のアプリとかエンジンで使っていい？ → イイヨー！(～以下説明～)」となっているので、私もそのうち何かやってみたいね。UE 素材は基本的に UE 限定みたいだけど、Unity はなかなか太っ腹だな(笑)。参考までに資料を載せておこう。

（参考）
・UE4でゼロからユニティちゃんを表示させるまで
・UE4 でユニティちゃんにアイドルモーションさせてみた





（関連記事）
【UnrealEngine】HTML5 (WebGL) ビルドする (UE4.8.3/Windows10)
【UnrealEngine】ランチャーがネットに繋がらない
【UnrealEngine】クラッシュを手動で修復する

　どうやらブループリントを編集しているときに、クラッシュする事が多いみたいだね。次回プロジェクトが起動できれば、復元オプションのようなものが出ることもあるが、プロジェクトの立ち上げ時にエラーが出てクラッシュする場合はどうにもできないので、手動で回復を試みたら上手くいった方法。ただし、あくまで最終手段というやり方なので、困り果てたときにやってみるのも良いかもしれない。


１．プロジェクトをランチャーから起動する前に、エクスプローラ(Windows)で、起動するプロジェクトのフォルダを開く。デフォルトだと「[マイ]ドキュメント\Unreal Projects」以下にプロジェクト名のフォルダで保存されている。その中の「Saved\Autosaves\Game」以下にオートセーブされたファイルが保存されている。その中から、最後に編集していたファイルと同じ名前のものを探す（例えば「(プロジェクト名)\Saved\Autosaves\Game\Blueprints\sample_Auto2.uasset」など）。ただし、ファイル名は「(ファイル名)_AutoX.(拡張子)」(Xは数字)となっている。何世代分か保存されているので、一番日付の新しいものを使えば良いだろう。

２．これを実際に使用しているファイルのあるフォルダ「Content」の中にコピーする（例えば「(プロジェクト名)\Content\Blueprints\sample_Auto2.uasset」など）。

３．そして、恐らく壊れていると思われる最後に編集していたファイル（例：「sample.uasset」）を削除し、コピーしたファイル（例：「sample_Auto2.uasset」）の「_AutoX」(Xは数字)をリネームで取り除き、元のファイルと差し替える。

４．プロジェクトをランチャーから起動する。


　また、「(プロジェクト名)\Saved\Logs」に「(プロジェクト名).log」にログが残っているので、テキストエディタで開き、「Error」や「Warning」で検索すれば、色々状況がわかる。ただ、情報が多すぎて特定は難しいと思ったら、最後にいじっていたファイルを疑うのが一番手っ取り早いかもしれない。


（参考）
・UE4がクラッシュしてしまう時の対処方法





（関連記事）
【UnrealEngine】キャラをとりあえず簡単に動かしてみる (UE4.9/Windows)
【UnrealEngine】HTML5 (WebGL) ビルドする (UE4.8.3/Windows10)
【UnrealEngine】ランチャーがネットに繋がらない

　なぜかいきなりログイン（サインイン）できなくなった。オフラインでも作業はできるけど、マーケットに繋がらないと素材がダウンロードできないので、調べてみたらフォーラムにいくつか解決方法があった。その中で一番簡単で上手くいった方法。

１．「Epic Games Lancher」のショートカットを右クリックし、メニューから「プロパティ」を開く。

２．「リンク先」の一番最後に半角スペースを１つ入れて「-http=wininet」を追加して、「OK」でダイアログを閉じる。


※Unreal Engine4.8.3/Windows10 で確認

　私の場合、修正後１度目のランチャー立ち上げで、自動アップデートしていたようだが、その後いつのまにか落ちていた(?)ので、Windows を再起動したら２度目は普通に立ち上がった。

　それでも上手くいかない場合は、アンチウィルスやファイヤーウォールなど、他の原因もあるかもしれないので、フォーラムやドキュメントを見た方が良いかもね。

（参考）
・Ue4のランチャーが、ネットワークに接続しなくなってしまいました。
・Troubleshooting Launcher Problems





（関連記事）
【UnrealEngine】キャラをとりあえず簡単に動かしてみる (UE4.9/Windows)
【UnrealEngine】HTML5 (WebGL) ビルドする (UE4.8.3/Windows10)
【UnrealEngine】クラッシュを手動で修復する

　UnrealEngine も無料化され、WebGL も一般的になってきたので、さっそく試してみることにした。


　ただ、WebGL 自体がまだ発展途中であり、バージョンアップごとにやり方が変わっているらしいので、あくまでも私がやった方法として記録しておく。バージョンが違う場合は役に立たないかもしれないが、なるべく詳細に書いておくので、つまずいた時の参考にでもして貰えると嬉しい。

※UE4.9 以降は「Emscripten」などサードパーティツールは必要なくなりました。以下のブログなどを参考にすると良いです。
（参考）UE4 4.9から変更になったHTML5ビルドの実行方法


　とりえあず Windows でやるには、いくつか必要なものがあるようだ(UE4.8)。Windows を再起動する必要があるので、先に全てインストールしてしまおう。また既にインストールしてある場合も、Emscripten や Python はバージョンによっては上手い行かないようなので、確認だけはしておいた方が良いかもしれない。また、Xampp は直接 Webサーバにアップロードする場合は必要ない。


■今回使用したもの
・Emscripten 1.27.0（C/C++ などを JavaScript に変換するコンパイラ）
・Python 2.7.10（プログラミング言語：HTML5ビルドに必要）
・Xampp（Webサーバ：ローカルPCで確認するには必要）

※UnrealEngine4.8.3/Windows10 で確認


■Emscripten をインストールする

　Emscripten は 以下のURLから SDK をダウンロードすることになるが、少々問題があった。
http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html

　というのは、掲載時点の最新版 1.34.1 では上手く行かないようだ。ビルド自体は成功するのだが、ブラウザでアプリ起動時に「Uncaught TypeError: Module.getMemory is not a function」といったエラーが出て止まってしまう。

　なので、とりあえず過去バージョンを試してみた。画面をスクロールして下の方にある「Archived releases」の中から「emsdk-1.27.0-full-64bit.exe」をダウンロードしよう。その上位バージョンは Windows の場合は NSIS Installer を使えば良いとあるが、面倒臭そうなのでやめた(笑)。できる人はやってみても良いかも知れない。


　ダウンロードしたら、あとはウィザードに従って適当にインストールするだけだ。以前のバージョンでは GitHub から UE のソースコードもダウンロードして、コンパイルしていたそうだが(?)、現バージョンではその必要はない。


■Python をインストールする

　Python は以下のURLからダウンロードすることになるが、こちらもバージョンには気をつけよう。
https://www.python.org/downloads/


　バージョンは 2.x (掲載時点：2.7.10）をダウンロードして欲しい。私のPCには昔インストした 2.7.8 があったのだが、そちらでも行けた。ついでにバージョン 3.x（掲載時点：3.4.3）も試したが、ビルドに失敗するようだ。

　ダウンロードしたら、あとはウィザードに従って適当にインストールするだけだ。マイナーバージョンはともかく、メジャーバージョン違いは上書きしないで、フォルダを分けてインストールしておいた方が安全だろう。


■UnrealEngine で HTML5(WebGL) ビルドする

　Windows を再起動したら、いよいよ UnrealEngine で HTML5 出力してみよう。インストールさえ成功していれば、あとは簡単にできると思う。

１．新規プロジェクトで適当にテンプレートでも選ぼう。試しに全てのデフォルトテンプレートでやってみたが、どれでも問題なく HTML5 ビルドできた。プロジェクトのターゲット設定は「モバイル/タブレット」「スケーラブルな2D/3D」にしておく。クオリティも十分と感じた。「デスクトップ/コンソール」「ハイエンド」でも構わないが、少し重くなる気がする。



２．プロジェクトが開いたら、「ファイル」メニューから「プロジェクトをパッケージ化＞パッケージング設定...」を開く。



３．「プロジェクト - パッケージ化」では「Build Configuration」を「Shipping」(出荷用)に設定する。「Development」のままだとファイルが巨大になってしまう。この設定はプロジェクトごとのようなので、新規で作る場合は毎回設定する必要がある（メニューの「ファイル＞プロジェクトをパッケージ化＞ビルドコンフィギュレーション」でも変更できる）。



４．次に左側のメニューを少し下までスクロールして、「プラットフォーム - HTML5 SDK」をクリックする。ここの「HTML5 SDK Paths」の「Location of Python.exe」に先にインストールした python.exe のパスを、同じように「Location of Emscripten SDK」にインストールした Emscripten のフォルダパスを設定する。この設定は１度やれば他のプロジェクトでも共通のようだ。



５．設定し終わったら、「ファイル」メニューから「プロジェクトをパッケージ化＞HTML5」でビルドしよう。出力するフォルダを指定したら、「HTML5」というフォルダが作成される。その中の「(プロジェクト名)-HTML5-Shipping.html」がアプリを起動するファイルだ。「index.html」にリネームしておけば使いやすいだろう。



　もし、「ファイル＞プロジェクトをパッケージ化＞HTML5」をしたとき、HTML5 ビルドの説明ページに飛ばされるなら、Emscripten のインストールに失敗している可能性がある。再度インストして Windows を再起動してみよう。ビルドに失敗するなら、Python のバージョンやパスなどを確認すると良い。



（参考）
・Unreal Engine 4.7 PreviewでHTML 5ビルドをしてみる


　ローカルPCで確認するには「Xampp」などをインストールすると良いだろう。インストールや使い方などは他のHPなどに譲ろう。ただ単純に表示するだけならば、あまりバージョンには依存しないだろう。起動も Apache だけで構わない。Web サーバにアップロードするなら、フォルダごとアップすればOKだ。起動ファイルを「index.html」にリネームしておいたなら、フォルダのURLで起動できる。ブラウザは Chrome か Firefox なら WebGL に対応している。また、WebGL は起動に多少時間かかるので、気長に待とう。


（参考）
・今さら聞けない！XAMPPをインストールする方法【超初心者向け】


　こういったサードパーティとの連携で実現するものは、各々のバージョンによって上手く行かない場合も多いので、なるべく古いバージョンもフォルダ分けなどして保管しておいた方が良いかもね。ただ、マイナーバージョンの場合、増えすぎて困るなら安定版（Stable/Recommended等）などを中心に残しておくと上手く行くことが多い。All In One パッケージのようなものがあったら、それが一番なんだけどね。





（関連記事）
【UnrealEngine】キャラをとりあえず簡単に動かしてみる (UE4.9/Windows)
【UnrealEngine】ランチャーがネットに繋がらない
【UnrealEngine】クラッシュを手動で修復する