第5回UE4ハンズオンセミナー

第5回 関西 Unreal Engine 4 ハンズオンセミナー

自己紹介 HN : alwei Twitterよくやっています。@aizen76 ゲーム業界でプログラマーを8年ほど。 今はフリーで様々なお仕事を受けています。 趣味で絵とかも描きます。モデリングも練習中。 Wii Uのスプラトゥーンに大ハマり中…夏コミヤバい。 UE4に関する事であれば何でもやりますので、いつでも声かけてください。

Unreal Engine4（通称UE4）って？ アメリカ合衆国ノースカロライナ州にあるゲーム会社、 エピック・ゲームズが長年開発しているゲームエンジン。 歴史を辿れば既に20年ほどの歴史がある、最古参のゲームエンジン。 去年のGDC2014で最新版のUE4が一般公開されて、 今年のGDC2015でUE4の使用が完全にFree(無料)に！ 作ったゲームを販売した場合にのみ5%のロイヤリティーがかかります。 それでも3ヶ月で3000＄を越えなければロイヤリティーなし。

UE4の国産ゲームの採用例 キングダムハーツ3 （スクウェア・エニックス） 鉄拳7 （バンダイナムコエンターテインメント） ストリートファイターV（カプコン） LET IT DIE（ガンホー・オンライン・エンターテイメント） シェンムー3（YsNet） 等々…現在進行形で採用例が増えています。 今日は皆さんに既にインストールされているUE4を使って、 1本ゲームを作っていこうと思います！（最新版のUE4.8.1を使用）

サードパーソン テンプレート まずはUE4.8を起動 サードパーソンテンプレートで始めます

その前に ご自身のパソコンスペックが厳しい場合には、 以下の部分を選択し、『ハイエンド』を『スケーラブルな3D・2D』に。 更に『デスクトップ/コンソール』を『モバイル/タブレット』に。 スターターコンテンツは有りのままにしておいてください。 プロジェクト名は自由につけてください。

モバイル/タブレットに設定した方 そのままだとマウス入力がタッチ扱いになります。 メニューから『編集』→『プロジェクト設定』→ 『インプット』→ 『Use Mouse for Touch』の チェックを外しておいてください。 これで入力が『デスクトップ/コンソール』を選んだ 時と同様のものになります。

ついでにノード名を英語化 同じようにメニューから『エディタの環境設定』を開き、 『Use Localized Graph Editor Nodes and Pins』のチェックを外します。 これでブループリント上のノード名が全て英語になり、わかりやすくなります。

プロジェクトが起動したら… 余計なものを消しておきます。階段とか、文字とか、？のアイコンとか。 選択後にDeleteキーで削除。

影が残った！？ 一度焼き付いた影が残っ たままになります。 ツールバー上にある『ビルド』ボタンでライティ ングビルドを行い、影を再度焼き直します。これ で余計な影はなくなります。

まだ動作が重いという方 最終手段ですが、ツールバーから『設定』の中にある、 『描画レベルをプレビュー』→『モバイル/HTML5』 を選択してみてください。シェーダーコンパイルが走り、 しばらく時間がかかります。 これで描画が一気に軽くなりますが、モバイル品質に なってしまうために動的影がなくなったり、一部マテリ アルの互換がなくなってしまうため、たまに見た目がお かしくなってしまう事もあります。 とりあえず軽くなればいいという方向け。

ここからゲームを作っていきます 目標は3Dパーソンシューティング。 プレイヤーキャラクターを操作（WASDで移動、スペースでジャンプ）し、 マウスでカメラを操作、マウス左クリックでショットを撃ちます。 敵はランダムに生成され、それぞれはAIを使ってプレイヤーに近寄ってきます。 プレイヤーにぶつかるとプレイヤーのライフポイントを奪い、 プレイヤーのライフポイントが0になった時点でゲーム終了です。 プレイヤーはショットで敵を倒しながら、スコアをどこまで稼げるかという、 サバイバルタイプのゲームになります。 スコアとライフはUIとして表示され、ゲームは何度もリトライできるようになっています。

まずは武器の弾を作成 『新規追加』から『ブループリント クラス』を選択し、 親クラスを『Actor』にします。作成したBPは 『PlayerShotWeapon』という名前にしておきます。

コンポーネントを追加する 作成したブループリントを開きます。 ファイルを開いたらコンポーネントを追加しましょう。 『ParticleSystem』コンポーネントと 『ProjectileMovement』コンポーネントを 追加しておきます。 コンポーネントとは既に1つ以上の機能を持った、 ブループリントクラスに追加できる汎用パーツの事です。 他にも様々な便利なコンポーネントがあります。

パーティクルエフェクトを追加 『ParticleSystem』を選択したまま、 右側の詳細から『Template』の横の 画像の赤い部分を選択。 『P_Fire 』というエフェクトを選択します。 上手く追加できれば炎のエフェクトが 表示されるようになります。

プレイヤーから撃てるようにする プロジェクト設定からインプットで、 Bindingsを追加します。 『Action Mappings』を選択して、 『+』ボタンを押してアクションを追加。 『Shot』という名前に変更してから、 『Mouse』の中から『マウスの左ボタン』を 探して選択します。

ブループリントから発射させる 『ThirdPersonCharacter』というブループリントを開きます。 『イベントグラフ』内で右クリックから検索メニューを表示させてノードを検索します。 『ActionEvent』の『Shot』と『GetActorTransform』と『SpawnActor Player Shot Weapon』 のノードをそれぞれ呼び出して、画像のように繋ぎます。 『SpawnActor～』のClassには『Player Shot Weapon』クラスを選択します。

プレイすると… 弾は発射できるが、 何かおかしい…

弾の速度と重力を設定する 『PlayerShotWeapon』のブループリントを開きます。 『ProjectileMovement』コンポーネントを選択したまま、『詳細』からProjectileの項目を弄ります。 『Initial Speed』を『2000』に。 『Max Speed』も『2000』に。 『Projectile Gravity Scale』は『0』にします。

再度プレイ… 弾が飛んだぁーーー！！ ヽ(*ﾟ∀ﾟ *)ﾉ

もう少し派手にしたい パーティクルを複製してみたり パーティクルのスケールを大きくしてみたり お好みでどうぞ

ついでに弾の寿命を設定 コンポーネントで『PlayerShotWeapon』を選択したままにするか、『クラスのデフォルト』を選択。 『詳細』のActorの項目内にある、『Initial Life Span』を『3』に設定します。 これで弾は生成後、3秒後に自動で消滅します。

更に効果音も設定してみる 『Audio』コンポーネントを追加。 詳細の『Sound』に『Explosion_Cue』を設定。

敵を作る 弾と同じように新規ブループリントを作成します。 今度は親クラスを『Character』クラスに。 名前は『EnemyCharacter』に変更します。

メッシュを設定する 『Mesh』を選択しておきます。 詳細の『Skeletal Mesh』を変更。 『SK_Mannequin』に修正。

メッシュの位置と向きを修正 ロケーション（位置）のZを『-90』、 ロテーション（向き）のZを『-90』に。 これでコリジョンの位置とほぼ重なり、 正面向きで動くようになります。

敵のアニメーション設定とマテリアル 『Anim Blueprint Generated Class』を 『ThirdPersonAnimBlueprint』に修正。 これでアニメーションができるようになり ます。 ついでにマテリアルを修正すると、 見た目が変わってプレイヤーと見た目の 違いがついてわかりやすくなります。 自由なマテリアルを設定してください。 もし見た目が変わらなくても、 一旦ウィンドウを閉じてから開き直すと、 しっかりとマテリアルが反映されます。

試しに一体配置してみる コンテンツブラウザからドラッグ&ドロップ するだけで配置が可能。

ここで弾のあたり判定を追加 『PlayerShotWeapon』のブループリントを 開いて、『Sphere Collision』コンポーネン トを追加。 中心に透明な球体のようなものが見えていればOK。 詳細の中の『Sphere Radius』の値を変えると あたり判定も大きくなります。

敵側のあたり判定 今度は『EnemyCharacter』を開きます。 『CapsuleComponent』を選択して、右クリック→ 『イベントを追加』→ 『OnComponentBeginOverlapを追加』を選択。 Overlapというのは見えないコリジョン同士が 重なった時に発生する呼び出しのイベント。 Beginは重なった瞬間、Endは離れた瞬間に発生。 お互いにOverlap用のあたり設定を持っていないと このイベントは発生しないので、注意。

弾と当たったかを確認する 追加された『OnComponentBeginOverlap』の『Other Actor』ピンを引っ張って、 ドラッグ&ドロップで操作します。そして『cast to PlayerShotWeapon』と入力。 この操作をしないとこのノードはでてこないので注意してください。

ノードを呼び出して接続する 更に3つのノードを呼出します。『Spawn Emitter at Location』、『GetActorTransform』、 『Set Life Span』を1つずつ。そして『Emitter Template』には『P_Explosion』を設定します。 これでヒット時に爆発エフェクトが発生するようになります。 『Set Life Span』はヒット後、0.2秒後に自滅する設定となります。

GetActorTransformを分解する 構造体ピンは右クリックから要素を 分解して取り出すことが可能。 分割して、『Spawn Emitter at Location』の 『Location』と『ROtation』に繋ぎましょう。

これで敵が倒せるように！！ ボーーーンッ！！ ＼(^o^)／ ﾔｯﾀﾈ

ここからは敵のAIを作成  AIを動かすには、様々な設定が必要です。  ナビゲーションメッシュ、AIController、ビヘイビアツリーなど、様々な 新しいものがでてきますので、焦らずに落ちついてやっていきましょう。  今回はあくまでも最低限の手順でAIを動かせるようにしています。  わからないところがあれば随時聞いてください。

ナビゲーションメッシュを作成 敵が移動できるように『Nav Mesh Bounds Volume』をレベル上に配置します。 これでAIを使った時にナビゲーションメッシュを使っての移動が可能になります。

ナビゲーションメッシュを全体に 配置した『Nav Mesh Bounds Volume』を スケーリングで大きくしてマップ全体に 広げておきます。 ここで『P』キーを押してみて、地面が緑色 に染まっていれば正常にナビゲーションメッ シュが生成できていることが確認可能です。 小さすぎると正しくナビゲーションメッシュ が機能しない事があります。 ちゃんと動かない時にはボリュームサイズを 大きくしてみてください。

AIControllerとビヘイビアツリー作成 新規ブループリント作成で、『AIController』 をメニューから検索して作成します。 名前は『EnemyAIController』にします。 更に新規アセット作成で『その他』から、 『ビヘイビアツリー』を作成します。 名前は『EnemyBT』にします。

ビヘイビアツリーとは？  別名『振る舞い木』。  その名の通り、振る舞い（ここでは タスク）をツリー上に並べていき、 視覚的にAIの動きを作っていくとい う仕組み。  ステートマシンと並び、AIを作るた めのメジャーな手法で、日本では アーマード・コアなどのゲームで採 用されているとか。

AIControllerからビヘイビアツリーを起動 『EnemyAIController』を開き、 イベントグラフ内へ移動します。 『Event BeginPlay』から、 『Run Behavior Tree』を呼出します。 『BTAsset』から作成した、 ビヘイビアツリー、『EnemyBT』を 選択します。 これでビヘイビアツリーが使えるように。

EnemyAIControllerを設定 『EnemyCharacter』を開きます。 『クラスのデフォルト』を設定したまま、『Pawn』の中の『AI Controller Class』を選択し、 ここに作成した『EnemyAIController』を設定しておけばOKです。

新規ブラックボードの作成 今度は作成したビヘイビアツリー『EnemyBT』を開きます。 ツールバー上に『新規ブラックボード』というボタンがありますので、 ブラックボードを作成します。 ブラックボードというのはAIにとっての記憶領域（メモリー）にあたる部分です。

ブラックボードにキーを作成 ブラックボードの名前は『EnemyBlackboard』に変更しておきます。 今度は『新規キー』を作成し、『TargetPoint』という名前で、『Key Type』を『Vector』にします。 『TargetPoint』はAIが移動する際に使用する移動対象地点となります。

新規タスクの作成 再びビヘイビアツリーアセット『EnemyBT』を開きます。 『新規タスク』から新規のビヘイビアツリーのタスク用ブループリントが作成されます。 コンテンツブラウザから名前を『BTTask_FindTarget』という名前に変更します。

タスクの中身を作成 『BTTask_FindTarget』を開いて、 『TargetPoint』という名前で変数を作成。 変数の種類を『Blackboard Key Selector』に変更します。 『編集可能』のチェックボックスにチェックをつけます。

タスクの中身を作成 以下のようにノードを組んでいきます。 特に『Finish Execute』のSuccessのチェックボックスがついていないと、 この後に正しく動作しないので、十分に注意してください。 このタスクでプレイヤーキャラクターの位置を探しだし、ブラックボードの値に書き込みます。

ビヘイビアツリーとブラックボードの関連付け ビヘイビアツリーとブラックボードを関連付ける必要があります。 『詳細』の『Blackboard Asset』で作成した『EnemyBlackboard』を選択してください。 これでビヘイビアツリーとブラックボードが関連付けされます。

ビヘイビアツリーの中身を作成 いよいよビヘイビアツリーの中身を作成します。 再度『EnemyBT』を開きましょう。 始めは『ROOT』ノードしかありません。 赤く囲っている部分を引っ張って、ノード検索し ます。 ビヘイビアツリーでは『Selector』と 『Sequence』というノードが主に分岐を担当す るノードになっています。 今回は最もシンプルな形で作成するので、 『Sequence』ノードを使います。

タスクノードを呼び出し 『Sequence』ノードを作成後、 左から『BTTask_FindTarget』、『Move To』、 『Wait』というタスクを作成します。 タスクにブラックボードの値が設定されているか確 認をしてください。『TargetPoint』が指定されてい ればOKです。 ノードの右上に数字がありますが、これがタスクの 実行される順番です。本来は分岐が入りますが、今 回は最もシンプルに左から右へと流れるだけにして います。

これでAIが動く！  上手くいけば『プレイ』するだけで敵がずっと追いか けてきます。  上手くいかない場合はナビゲーションメッシュのボ リュームサイズを大きくしてみる、タスクの 『FinishExecute』のSuccessのチェックボックスが ついていないか等、確認してみてください。  そしてもう一度全体の手順の見直しを。

ここから…  プレイヤーのライフと敵を倒したスコアがUIとして表示される。  敵にタックルされるとプレイヤーがダメージを受ける。  敵を倒すとスコアが加算される。  敵を4箇所からある程度ランダムに出現させる。  ライフを全て失なうとゲームオーバー。  リセットを押すと強制リセット。 焦らずにやっていきましょう。

プレイヤーのライフを作成 プレイヤーキャラクターである『ThirdPersonCharacter』にライフ用の変数を追加します。 ブループリントを開いて、『LifePoint』というFloat型の変数を追加。 『編集可能』のチェックボックスにはチェックをいれておきます。 『Life Point』のデフォルト値は『1.0』に設定しておきます。

ウィジェットブループリント作成 新規で『ユーザーインターフェイス』から、 『ウィジェットブループリント』を作成します。 名前を『GameUI』というファイル名にします。

ゲーム用UIの作成 ファイルを開くとUIをデザインするための画面が開きます。

プログレスバーを作成 『共通』から『Progress Bar』をD&Dで画面の左上に配置します。 適当に大きさを拡大して、長さを調整します。

プログレスバーにバインドをする プログレスバーを選択したままで、 『詳細』の『Progress』内の 『Percent』をバインドします。 『バインディングを作成』してください。

ウィジェットのブループリント バインドすると専用のブループリントが開きます。 下記の画像のようにブループリントを組んでいきます。 赤の部分はD&Dから検索しないと出現しないので気をつけてください。

レベルブループリントを開く ツールバー上から『レベルブループリン トを開く』でレベルブループリントを開 きます。 レベルブループリントには『GameUI』 のウィジェットを追加するためのノード を組んでいきます。

ウィジェットをゲーム上に追加 レベルブループリントに下記のノードを追加していきます。 『Create Widget』の『Class』を『GameUI』に修正します。 『Add to Viewport』は『Return Value』ピンからのD&Dで検索してください。

プレイしてみよう ゲーム上にゲージ出現！

敵にタックル攻撃のコリジョン 『EnemyCharactr』を開きます。 『コンポーネントを追加』から、 『Sphere』コリジョンを追加します。 大体画像の位置までコリジョンを 動かして位置を調整します。

コリジョンイベントを追加 『Sphere』コンポーネントを 右クリックして『イベントを追加』、 『OnComponentBeginOverlapを追加』。 オーバーラップとはコリジョン同士が重 なった時に発生するイベントの事です。 これでプレイヤーと重なった時にダメージ を発生させます。

タックルでダメージを与える 『OnComponentBeginOverlap』から下記のようにノードを組んでいきます。 赤丸の部分はD&Dしてから検索をしてください。 『LifePoint』は最大で『1.0』なので、『0.1』ずつ引き算していきます。

タックルでダメージ！ 敵からタックルされると、 ゲージが減ります。

スコアを作成 スコア管理用のブループリントを作ります。 新規ブループリントを作成します。 親クラスに『GameState』を指定して、 『選択』をします。 ファイル名を『MyGameState』に変更します。

MyGameStateを使用できるようにする メニューから再度、 『プロジェクト設定』を開きます。 『マップ&モード』を選択して、 『Game State Class』を選択します。 リストにある、『MyGameState』を 選択するとゲーム中に使用可能になります。

Score変数を追加 『MyGameState』を開いて、変数を追加します。 『Score』変数を追加して、『Int型』に変更します。『編集可能』にチェックをいれます。

UIにスコアを追加 スコアを追加するために『GameUI』を開きます。 今度はデザイナー画面で『Text』を2つD&Dで配置します。

テキストの変更とバインド 片方のTextを『SCORE :』に変更し、もう片方は適当な数値を入力しておきます。 配置を調整しながら、数値を入れた方のTextを『バインディングを作成』しておきます。

スコアのノードを設定 バインドして開く先で下記のようにウィジェットブループリントを組みます。 赤丸の部分はD&Dしないとでないことに注意してください。 『ToText』は直接『Score』ピンから『Return Value』ピンに繋ぐと自動で出現します。

敵を倒したらスコアを足す 『EnemyCharacer』のブループリントを開きます。 さきほど敵を倒した処理を作成したので、最後に作った『Set LifeSpan』ノードの後に、 下記のノードを足していきます。赤の部分にはD&Dしてから検索してください。

敵を倒すと… スコアが増えたッ！！

敵をランダムで出現させる 敵をランダムに出現させるブループリントを 作成していきます。 新規ブループリントを作成し、 親クラスを『TargetPoint』にして『選択』。 ファイル名は『EnemySpawnPoint』にします。 ファイルを開いて、イベントグラフのウィンド ウを開いておきます。

ランダムで出現させるために 『Event BeginPlay』から開始します。 『Delay』ノードに対して、 『Random Float in Range』ノードで 『Min』に『2』、『Max』に『5』を 入れておきます。 これで、2秒から5秒の間でランダムに出 現することになります。

敵を出現させる処理 『Delay』の後に敵を出現させる処理を作成し ていきます。 『Spawn AIFromClass』ノードがAIを持つ敵 キャラクターを生成します。 『Pawn Class』に『Enemy Character』、 『Behavior Tree』に『EnemyBT』を それぞれ設定してください。 あとは『GetActorLocation』と 『GetActorRotation』からそれぞれ、 位置と向きをとってきて、そのままノードピ ンを接続していきます。

処理を無限ループさせる Rerouteノードを少し上の位置に 追加して配置します。 下記のように『Spawn AIFrom Class』のお尻と 『Delay』の頭のピンにそれぞれ繋げます。 これで処理は無限にループしてくれます。

EnemySpawnPointを配置する カメラを真上の位置にして、下に向けた時に以下の赤丸の位置に、 『EnemySpawnPoint』を配置します。高さも必要に応じて調整してください。

プレイすると… 敵がランダムに出現して大量に襲ってくる…！！

ゲームオーバー画面の作成 ゲームオーバー画面を作成します。 『GameUI』を開き、『Text』を大体真ん中の位置に配置します。

表示の調整 『Text』を『GameOver !!』に変更します。 『Color and Opacity』の『G』と『B』を『0』にします。 『Font』の数値を『60』にします。

可視状態の設定 普段は文字は見えないようにするために、 『Visibility』を『Hidden』に変更します。 そのまま右にあるバインドを選択し、 『バインディングを作成』を選択します。

可視状態変数を作成 バインディング後、自動でグラフ画面に移動します。 可視状態を管理する変数『Visible』を新規作成します。 『変数の種類』を『ESlate Visibility』型に変更します。 この変数で可視状態を決めることになります。

可視状態の制御 そのままグラフ内に下記のようにノードを作成していきます。 いつものごとく、赤の部分はD&Dから検索して呼び出してください。 これでライフポイントに応じて処理を分岐させます。

可視状態の制御 『Branch』以降の続きです。ライフがなくなった場合、 プレイヤーは入力を無効化するために『Disable Input』を呼び出します。 その後に表示を『Visible』に切り替えます。 そうでない場合はずっと『Hidden』を設定しておきます。

可視状態の制御 ラストです。 最後は『ReturnNode』の『Return Value』に、『Visible』変数の値を 渡してあげるようにして完了です！

ライフがなくなると… GameOverが表示され、入力ができなくなれば成功です！！

最後にリセット機能を入れよう ゲームオーバーになっても再開できるようにリセット機能を入れます。 レベルブループリントから『R』キーイベントを配置し、『Open Level』を で『Level Name』に『ThirdPersonExampleMap』を設定します。 これで『R』キーを入力するとゲームをリセットできます！

ゲームできたー＼(^o^)／ これで一通りの機能が入ったゲームを作成で きました。 あとは敵AIの待機時間や出現時間を調整して みたり、敵の速さなどを調整してみることで ゲームバランスを調整してみましょう。

今回学んだこと 弾の撃ち方、敵とAIの作成、UIの作成、攻撃コリジョンの作成、ランダム出現す る敵の作り方やスコア処理、ライフ処理、ゲームオーバー処理、などゲームに必 要なものの作り方を一通り学んだことになります。 ここまでをしっかりと理解できていればかなりのゲームに応用することが可能で す。今回作ってみたものを家で改造してみたり、別のゲームへと作り替えてみま しょう。 楽しい勉強はまだ始まったばかりです！ 一緒にUnreal Engine4を学んでいきましょう！ ノウハウはぜひネットなどで共有してください！