これは 【その1】ドリコム Advent Calendar 2015 の 24日目の記事です。
23日目は wagi さんの 遊びのイメージをつくる、ゲームと世界観の話 でした。

自己紹介

• 2014年4月にドリコムに入社

• 研究開発部に所属

• 自社ブラウザゲームのページデザインと、フロントエンドエンジニアしてます

• 好きな飲み物は日本酒です

 

クリスマス！ということでせっかくなのでUNREAL ENGINE 4でクリスマスカードを作りました。

 

動画は最後にリンクを貼ります。

 

 

 

UNREAL ENGINE 4とは？

UNREAL ENGINE 4 (以下UE4)はゲーム開発者がゲーム開発者のために作った統合開発環境です。

1人でもチームでも、ハイエンド3DゲームやＶＲから2Dのモバイルゲームまで、どんなゲームでも作ることができます。(公式サイトより引用)

www.unrealengine.com

弊社のネイティブアプリは、cocos2d-XやUnityを使っていますが、今まで自身でゲームエンジンを使った事なかったことと、UE4の動画を見て興味があったので、コレを期に勉強がてら作ってみることにしました。

 

 

1日でクリスマスカードをつくる

前もって伝えておきたいのは短時間にサクッと制作する事を前提にしているので、恥ずかしながら細かいクオリティーを詰めていないです。(言い訳ではありません、本当に)

 

そして下記が今回のクリスマスカードで使用したUE4機能の一覧です。

UE4のUIやファイル管理、機能の細かい説明は長くなってしまいますので割愛します。

1. ランドスケープ(地形の作成)
2. スケルタルメッシュ・マテリアル(ツリー・ロゴ)
3. マチネ機能(アニメーション)
4. ブループリント
5. レベルエディタ
6. さぁMovieに書き出そう

 

1.ランドスケープ(地形の作成)

まずはランドスケープ機能で地形を作ります。

ランドスケープについて簡単に説明しますと、レベル上で地形をスカルプトできる機能です。

 

モードを山のアイコン「ランドスケープ」を選択して、まずは土地の大きさを設定します。

マップの広さや地形のマスの大きさをここで設定します。

↑の画像でいう、「合計コンポーネント」が低ければ低いほど、パフォーマンスがよくなります。

また、他のツールで作った地形マップもインポートすることができます。

 

ランドスケープの細かい内容は、本家のサイトに詳しくのっているのでここでの説明は省きます。

参考：Unreal Engine | ランドスケープの編集

 

では、ルンルン気分で地形を作っていきます。

クリスマスといえばサンタなので、サンタの出身地(といわれている)・フィンランドのラップランド地方をイメージしています。

雪山と真っ白な平原を作成しました。とっても寒そうです。

 

 

ちなみに、地形のマテリアルはマテリアルエディター上で作成する事ができます。

テクスチャと凸凹のノーマルマップをブレンドしてマテリアルを作ります。

上記の画像では芝生と岩と雪を設定していますが、今回は雪のみでペイントしています。

 雪の質感を地表に塗りつけるのは、ランドスケープのペイントツールを使用しました。

参考：Unreal Engine | 5.ランドスケープ マテリアルをペイントする

 

 

次は時間帯を設定します。

サンタが活躍するのは夜なので、夜に設定しています。

(この作品ではサンタは活躍しませんが)

 

天球の設定や、雲や星の量もUE4の機能で簡単に設定できます。 

こんな感じ。

参考：Unreal Engine | 2.大気と指向性のライティング

参考：[UE4] 天球の設定方法 | historia Inc - 株式会社ヒストリア

 

 

向かって右側の山は見えないところなので適当に作りました。

(容量の問題で最後は平らにしました。)

 

山だけだと寂しいので、フォリッジで木々を植えていきます。

フォリッジとは、スタティックメッシュ等、レベル上のアクタをすばやくペイントまたは消去することができる機能です。(公式サイトより)

 参考：Unreal Engine | フォリッジ インスタンス化メッシュ

 

 

フォリッジを選択して、ブラシのサイズや、密度、3Dモデルを登録・設定・選択します。

モデルの高さをランダムで設定できるので、高さの違う木々を自然にペイントすることができます。

ちなみに、↑の「Align to Nomal」は、

山や平野の表面に対して対して垂直か(ローカル)、フィールドに対して垂直か(ワールド)、選択できます。

最初、木が山の斜面に対して垂直に立ってしまったので、ハマりそうになりました。

 

このようになんとなく、森っぽいものを作っていきます。 

 

中心にいるポツッと黒いのが、クリスマスツリーですね。

まるでカゴメカゴメ状態です。

 

 

 

 

 

2.スケルタルメッシュ・マテリアル(ツリー・ロゴ)

ツリーや3Dテキスト等の3Dデータをフィールドに設置していきます。 

ツリーは(作る時間がなかったため)、UE4で配布している使用可能なデータを使いました。 

 

ツリーの飾りは、ただの球体です。イルミネーションのつもりです。

後ほど光るようになります。

(飾りがただの黒丸すぎて正●丸のように見えますね。)

 

 

 

3Dテキストは、IllustratorCCで作成、

mayaで3D化しています。

 

 

(作っている時はティム・バートン監督の"ナイトメアー・ビフォア・クリスマス"の雰囲気にしたかったため、ノリノリで作りましたが後に後悔する事になります)

 

 

3DデータをUE4にインポートしたら、マテリアルを当てます。

ちなみにインポートの形式は.fbxを使用してます。

 ※3Dテキストちっちゃくてすみません

 

地形、森、必要な3Dモデル全て設置したら、レベル上全体のバランスを確認しつつランドスケープやフォリッジで修正していきます。

 

 

 

 

3.マチネ機能(アニメーション)

マチネアニメーションツールとは、動的なゲームプレイあるいはシネマティックなインゲームを作成するために、時間の経過と共にアクタのプロパティをアニメートすることができるアニメーション ツールです。(UE4公式サイトより)

 

 

カメラ・3Dテキストにキーフレームを配置しながら、動的なシーンを作っていきます。

マチネエディタで、微調整・微調整・微調整。 

ビュー上に現れる線が、ムービングするものの軌道なのですが、結構扱いづらかったです。直感的のように見えて直感的ではない。

結局、ロケーションの数値を直接入力して場所を設定しました。

(私だけなのかな...使いづらいの...)

 

参考：Unreal Engine | マチネ & シネマティクス

 

 

 

 

 4.ブループリントの設定

だいぶ完成に近づいてきたのですが、ツリーのイルミネーションに仕掛けをします。

やりたい事はただ2つ。

• ツリーの電球をランダムに光らせたい！
• ツリーの電球をカメラが地上に降り立って少ししてから点灯させたい！

これらをブループリントを使って簡単にスクリプトを書く事が可能です。

 

 下の写真は例として、ツリーの球体のブループリントです。

ツリーとイルミネーション、マチネでブループリントを使用しました。

• マチネで指定タイミングでTurnOnLighイベントを発火
• レベルブループリントで受けて、ツリーのブループリントStratLightイベント発火
• ツリーのブループリントで子要素のネオン一つ一つのStartLight発火
• ネオンのブループリントでStarLightを受けたらランダムで0〜2秒待って、TimeLine起動 

みたいな感じ。

(プログラムの部分はやはり難しいので、知り合いのプログラマーさんに質問攻めして指導してもらいました)

 

それと、レベル(シーン)全体のブループリントではプレイヤーをカメラに設定してプレイするよう作成しています。

 

ブループリントはプログラムを知らないデザイナーでも扱えるらしいですが、複雑な事しない限り本当でした。

 

参考：Unreal Engine | ブループリント・ビジュアル・スクリプティング

 

 

 

 

5.さぁMovieに書き出そう

ムービーの書き出し方は簡単です。

マチネのメニューのムービーの書き出しをクリックして、保存先とファイルタイプを選択するだけです。

ムービーを撮る前に注意したいのは、ビルドを実行することです。

UE4はビルドをする事で影やテクスチャが焼き付けらるので、ビューの確認する際はビルドが必要です。

特に、メッシュを動かした後やテクスチャの再設定した後などはビルドしておいたほうが良いです。 

 

では、確認してみましょう。

ちょっと笑いどころ満載ですが、細かいところは気にしないでください。

 

最初の3Dテキストがありえない方向に落ちていったりとか、最後のメリークリスマスの文字が落ちてくるところとか、イルミネーションが浮いてるとか、細かいところは気にしないでください。

 

それと3Dテキストをフィールドに置いた瞬間、すっごくチープになってしまったので、ティム・バートン風にしたのは若干後悔です。

 

しかし、制作時間は本当に楽しかったですね。

UE4はビルドして再生すると、驚くほど実写に近くなります。

そこが本当にワクワクして良い体験でした。

 

困った事

UE4はUnityと比べ、ドキュメントがかなり少ないです。書籍もまだまだ少ないです。

なので、UE4公式のドキュメントとチュートリアル(英語....)で勉強し始めました。

エラーが出た時は、エラーの原因を検索して解決する(しない)を繰り返しました。

特に頻繁に起こったのは、UE4上のテキストボックスに日本語入力の状態でクリックすると落ちる症状です。

解決策は、UE4を触る時は日本語入力できないように設定したら解決しました。(アプリがあったのでインストール。)

ものすごく地味なエラーですが、UE4自体が落ちてしまうので大変困りましたね。

 

ちなみに、下記は私が参考にした書籍です。

 本当に分かり易いのに濃い内容でしたので、すごく参考になりました。

 

デザイナー向けに、マテリアルデザイン入門の本は気になるマテリアルを細かく説明してくれています。人にオススメしたい良い本でした。

 

それと、UE4の公式のコミュニティーもあるのでよくわからないエラーの時は覗いてみると解決したこともありました。

(今回はそこまで重いエラーは出ませんでしたが。)

 

これからやりたい事 

今回は天候(雨や雪・風)を使っていないので次回の作品(と呼べるのか?)では積極的に使用したいですね。

あと、BGM。

環境音があるだけでもだいぶ雰囲気が出るので、今回使えなかった事に若干後悔です。

 

そして、UE4を学んで使ってみて思った事は、

「めちゃくちゃおもしろい」です。

mayaを業務外で触っていますが、mayaに比べてとても敷居が低いように感じました。

また色々と作っていきたいと思います。