第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を学んでいきましょう！

ノウハウはぜひネットなどで共有してください！