SlideShare a Scribd company logo
Unity&UnrealEngine
作って比べるハンズオン勉強会
UnrealEngine編
改訂版1:UE4.8対応
2015/06/20
2015/07/04 奥出 成希
@sokude
ハンズオン概要
● UnityとUnrealEngineでの制作方法や考え方の違いを、実際の制作を通して体感する
● 理想的には両方を作って比べたいのだが、PCの性能その他諸々の理由でどちらかを選んで作ってもOK
● 宇宙モノSF映画によくある、隕石群を突破する宇宙船をテーマにミニゲームを作成する
● 視覚効果的なところは取り上げない
登場オブジェクトの概要
● 宇宙船
○ プレイヤー操作可能
○ 前方へ向かって自動的に移動
○ キー操作で上下左右に移動
● 隕石
○ 回転している。移動はしない。(宇宙船が移動するため)
○ 宇宙船進行方向に対して一定間隔で30個ほど配置
○ 前方方向へは一定間隔だが、上下左右はランダムで配置
○ カメラより後方になった場合前方へ位置を変える
● 壁
○ 宇宙船上下左右の移動を制限するための壁
○ 見えないけど当たり判定だけある
○ 宇宙船についてくるようにする
● カメラ
○ カメラは宇宙船後方から一定距離で撮影
○ これも宇宙船についてくるようにする
制作手順 1
● UnrealEngineの起動とプロジェクトの作成
○ 新しいプロジェクト作成
○ ブループリントタブ→ブランク、デスクトップ/コンソール、ハイエンド、スタータコンテンツ無し
○ プロジェクトフォルダとプロジェクト名は適切に設定する。
● エディタの設定
○ 編集メニュー→エディタの環境設定
○ ビューポート →Invert Middle Mouse Pan : Unityと同じようにしたい
● 各ビューの説明
○ モード
○ ツールバー
○ ワールドアウトライナー : UnityではHierarchyに相当
○ 詳細 : UnityではInspectorに相当
○ コンテンツブラウザ : UnityではProjectに相当
○ ビューポート : UnityではScene/Gameビューに相当
● 不要なオブジェクトの削除
○ Floor、SkySphere、AtmosphericFog、SkyLight
○ 画面真っ暗でもあせらない
● この時点で一旦セーブ
○ シーンは「level」と呼ばれるアセットに保存される
○ 適当に名前をつけて保存する(例えばlevel01など)
画面が狭くて辛いので、ウィンド
ウ配置などは適当にアレンジ
例えば
● ツールバーは一度ドックア
ウトして画面最上段へ
● モードはコンテンツブラウザ
や出力ビューと並列に置く
制作手順 2
● 製作前に確認
○ UE4での座標系
■ X:前後
■ Y:左右
■ Z:上下
● 宇宙船の作成、配置
○ ジオメトリブラシを組み
合わせて宇宙船らしい
フォルムを作成
○ ビューポート上で作業
○ モードメニューのBSP
からボックスをビュー
ポートにドラッグアンド
ドロップで配置
○ 位置、大きさなどの調
整
[0,0,0] - [1.0,1.0,0.1] [-60,0,-20] - [0.8,0.2,0.2] [-120,-30,5] - [1.0,0.1,0.15] [-120,30,5] - [1.0,0.1,0.15]
4つのボックスブラシを選んで一度グループ設定してからスタティックメッ
シュへ変換すると、モデルの基準点が真ん中に設定されるので都合が
良い
グループ設定すると、BOXブラシ1つだけを選択してもグループすべて
のBOXブラシが選択状態になってくれる。
左図の下三角をクリックしてオープンすると「スタティックメッシュを作
成ボタンが現れるので押して変換する。
名前をつけるダイアログが現れるので「starship_StaticMesh」として
保存する。
不要になったGroupActorは削除する
starship_staticMeshを選択して「変換」の下のムーバブルを選択する。
ゲーム内で動かすことのできる物体として設定した。
マテリアルの作成
マテリアルとは、表示物の材質のこと。
ここでは単純に色を設定だけのマテリアルを作る。
宇宙空間っぽく作りたくて環境光などを全部捨ててし
まった関係でマテリアルに自己発光を入れないと、
バキバキの陰影がついてしまって格好悪い。
名前は「starship_Material」
出来上がったマテリアルをダブルクリックで開き、編
集する。
グリッドのなにもないところを右クリック
→VectorParameterを選択
色を設定して(170,202,208,255)
一番上のピンからベースカラーにつなぐ
Constant(定数)を出して0.3に設定、エミッシブカラーに
つなぐ
ほんのり光るマテリアルの完成
ちゃんと保存する(左上)
コンテンツブラウザ上の
starship_StaticMeshをダブルクリックしてメッ
シュの詳細な編集を行う
● マテリアルの適用
● コリジョンの設定
詳細からマテリアルの選択を行う
選択肢にstarship_Materialがあるので選択する
コリジョンメニューから
ボックス単純化コリジョンを追加する
当たり判定領域の設定
左上、保存ボタンを押す
4.8での補足
オートコンベックスコリジョンが正しく動作しているようなのでこちらにしても良い
制作手順 3
● 隕石の作成
○ 基本部品のキューブをそのまま使うこ
とにする
○ モードの基本からキューブをビュー
ポートにドラッグアンドドロップ
○ 名前はCubeからMeteorに変更しておく
○ マテリアルは宇宙船と同じような作り
になる。色だけ違うものにしておこう
○ 出来上がったマテリアルはスタティック
メッシュにドラッグアンドドロップで適用
する
○ 忘れずにムーバブルにしておく
出来上がった隕石をいったんBluePrint化してお
く。
詳細→ブループリント ボタンを押す
なまえは「Meteor_Blueprint」とする
後からプログラムでこのMeteor_Blueprintをたくさ
ん生成したりすることができる
ブループリント化したらワールアウトライナーから
削除しておく。
制作手順 4
● 移動範囲制限壁セット
○ キューブを拡大して上下左右を壁
床天井として配置する
○ 宇宙船の上下方向の移動を制限す
るための「壁」を設置する
○ 宇宙船の動きに追従して動く
○ Cubeオブジェクトを使うが、後で表
示だけ消すことで当たり判定のみ残
す
○ 上下左右の壁はそれぞれ
wallU,wallD,wallL,wallRとする
○ wallSetという名前でエンプティアク
ターを作り壁4つはその下の階層に
配置する
各物体の位置とスケール
wallSet[0,0,0][1,1,1]
wallU[0,0,300][3,10,1]
wallD[0,0,-300][3,10,1]
wallL[0,-500,0][3,1,10]
wallR[0,500,0][3,1,10]
カメラアクタを追加する
モードメニューの検索欄に「camera」と打ち込み、検索結果から
「カメラ」を選んでビューポートにドラッグアンドドロップ
wallSetの子階層に配置す
る。
位置は[-400,0,0]に設定す
る。
Auto Activate Playerを
「Player0」に設定
ワールド設定を出す。
ここでよく落ちるので必ず一旦保存しておくこと!
GameModeの作成
DefaultPawnをNoneへ設定
こうすることで、UE4が用意してくれるデフォルトのプレイヤーキャラが出現しなくなる。
Blueprint作成
● starShipのブループリント
○ 前方へ向かって自動的に移動する
○ プレイヤーの入力で上下左右に移動する
● Meteorのブループリント
○ ランダムな回転
○ 移動はしない(宇宙船が移動するため)
○ カメラの位置より後方になったら前方に移動する
● 全体コントロールのブループリント
○ 隕石をたくさん生成する
○ 壁セットを宇宙船に追従させる
宇宙船のブループリント
● 宇宙船の移動に関して
○ 物理エンジンを用いて移動させる(AddForce命令)
○ 定期的に前方に向かって一定の力をかけ続ける
○ ユーザーの入力に従って上下左右にも力をかける
○ 重力下での物理挙動は重力の影響を受けて落下するが今回は重力を使わない(宇宙だから)
○ しかし空気抵抗まで消してしまうと操作が難しくなるのでこれはいれる(ゲーム的嘘)
● 当たり判定に関して
○ Meteorと衝突する設定だが、完全にぶつかって通り抜けできない状態だとゲームが進行しない可能性があ
る
○ これを回避するためにMeteorはすり抜けられる物体として、宇宙船と接触した場合プログラムで宇宙船にか
かっている物理的な力を0にすることで停止させる
StarShipスタティックメッシュからStarShipブループリントへ変換する
ワールドアウトライナー上のsた
rShip_StaticMeshを削除して、
新しく作成したstarShip_Blueprintをコンテンツブ
ラウザからドラッグアンドドロップでビューポート
上に配置する。
座標は[0,0,0]
コンテンツブラウザのblueprintsフォルダ内に保
存されているので注意
宇宙船ブループリントが物理的な力を受け取れるようにするための設定
ワールドアウトライナーでstarshipを選択、コンポーネントからStaticMeshを選択状態にしておく
simulatePhysicsのチェックを入れる
OverrideMassのチェックを入れ、Mass in Kgに「0.1」を設定
EnableGravityのチェックを外す
LinearDumpingの値を「1.0」に設定
コンストレイントの回転をすべてロックする
Collisionの項目まで降りて、
Genarate Overlap Eventのチェックを入れ
る
コリジョンプリセットをBlockAllにする
キー入力の設定
設定メニューからプロジェクト設定を開く
「入力」項目でAxisMappingを編集する
AとDキーをXAXISという名前で-1~+1の値
WとSキーをYAXISという名前で-1~+1の値
宇宙船がキー入力を受け取れるようにするための設定
ブループリントメニューからstarShip_Blueprintクラスを開く
キー操作で動かしてみる
イベントTick:定期的に発生するイベントでAddForceする。
AddForceするための材料はどちら向けに力がかかっているかという情報、これをVector3で表現する
Vector3を作るためにMakeVectorする
XAXISとYAXISから得たキー入力情報をDeltaSeconsを6000倍したもので掛けてVectorを作る
https://docs.google.com/document/d/1J62zF4Ih3-e_3yN1VWMLQPmIAA0dYNFOW2Xnckh6-Io/edit?usp=sharing
ブループリントの作成が辛い
時間の関係でどうしてもこのような勉強会ではプログラム部分をコピペに頼る部分がある。
UnityのC#スクリプトのようなものだと、プログラムがテキストなのでそれこそ該当部分をコピペで作ることもできる。
ブループリントでもノードをコピーしてテキストエディタへペースト、そのテキストを逆にブループリントのイベントグラフへ
ペーストすれば元のノードに復元できる。
そのテキスト量はけっこう多いので前頁スクリーンショット下のリンクから取得のこと。
注意)C++のプログラムになっているわけではなく、あくまでもノードのつながり情報をコピペしている。
宇宙船ブループリントをコピーしてテキストエディタへペーストしたもの
Begin Object Class=K2Node_Event Name="K2Node_Event_136"
Begin Object Class=EdGraphPin Name="EdGraphPin_19871"
End Object
Begin Object Class=EdGraphPin Name="EdGraphPin_19870"
End Object
Begin Object Class=EdGraphPin Name="EdGraphPin_19869"
End Object
Begin Object Name="EdGraphPin_19871"
PinName="DeltaSeconds"
PinToolTip="Delta SecondsnFloat 型"
Direction=EGPD_Output
PinType=(PinCategory="float")
AutogeneratedDefaultValue="0.0"
LinkedTo(0)=EdGraphPin'K2Node_CommutativeAssociativeBinaryOperator_19.EdGraphPin_19897'
LinkedTo(1)=EdGraphPin'K2Node_CommutativeAssociativeBinaryOperator_18.EdGraphPin_19912'
End Object
Begin Object Name="EdGraphPin_19870"
PinName="then"
Direction=EGPD_Output
:
:
:
:
:
こんな感じのものが 400行ほど
保存して実行して確認
入力ミス、設定ミスがなければ宇宙船が上下左右に動き、壁にあたって止まるようになっている。
DeltaSecondsの意味
可変フレームレート実装のため、前フレームからの経過時間が取得できる
フレーム更新レートが低い時には大きな動きを回数少なく実行
フレーム更新レートが高い時には小さな動きを回数多く実行
隕石の設定
● コンテンツブラウザ上
Meteor_Blueprintをビューポート
に置く
● 座標1000,0,0にする
● コンテンツブラウザ上の
Meteor_Blueprintをダブルクリッ
クでブループリントエディタを起
動
● ビューポートタブを開く
● 前述の当たり判定関連で
GenerateOverlapEventのチェッ
クを入れ、コリジョンのプリセッ
トをOverLapAllに設定
● これでこれ以降作られる
Meteorはすべてこの設定にな
る
隕石を回転させる
変数の宣言
イベントグラフ
https://docs.google.com/document/d/1SFWl274bzOucN3ewidQhvoVOOoka68Yif_wDjrZdlGc/edit?usp=sharing
隕石の位置をランダムにする
再利用することを考えて関数にしておく
奥行方向は引数で指定、上下左右をランダムにする
https://docs.google.com/document/d/1OA-qq-vXuedfp9QLUzGHPiXSuB8UQkkSzN6ZvZmGZhE/edit?usp=sharing
確認のために実行する
実行のたびに違う方向へ回転しているはず
出来上がったBlueprintをたくさんビューポート上に配置すれば隕石群の完成だが、30個ほどもいちいち手動で配置する
のは手間がかかりすぎるので自動生成させる
レベル全体をコントロールするためにUE4では「レベルブループリント」と呼ばれる特殊なブループリントがあり、隕石の
発生はこのレベルブループリントに担当させることにする
レベルブループリントでのプログラム
ForLoopで30回回す→SpawnActorのClassにMeteor_Blueprintを指定して発生させる
SpawnTransformは初期位置としてMakeTransformで作成してTransformを渡す
Loopのインデックスから奥行きの位置を計算する300倍して1000を足したものをMeteor_BlueprintのResetPos関数に渡
すことで位置を決定する。
https://docs.google.com/document/d/1Rb5eBSoDLXIYyIn3iOFWOH4ynVGfdcXznNdvFOEcNxA/edit?usp=sharing
実行結果
最初に追加したMeteor_Blueprintは必要なくなったので削除しておくこと
宇宙船を前に進ませる
starShip_Blueprintを編集する
https://docs.google.com/document/d/1CzD5HmjrbnNBmIlaCcJxLQeD-uu7A425gjqktto5heg/edit?usp=sharing
このまま実行すると、カメラと移動制限壁を置き去りにして、宇宙船は前方へ加速していきます。
これは意図している動きではありません。
カメラと移動制限壁を宇宙船の位置に追従させます。
壁セット+カメラを宇宙船に追従させる
登場物のどれかがその制御を担当することになります。
この選定もゲームによったり、プログラマの判断によったり適宜選択することになります。
今回はレベルブループリントに担当させます。
レベルブループリントにワールドアウトライナー上のオブジェクトである「starShip」と「wallSet」を把握させるために次のよ
うな操作を行います。
レベルブループリントのタブを掴んでドックアウトする
ワールドアウトライ
ナーからstarShipと
wallSetをレベルブ
ループリントの
EventGraphにドラッ
グアンドドロップする
starShipの座標をGetWorldLocationで取得してwallSetにSetActorLocationで適用するだけ。
しかしこれだと、上下左右も連動してしまうので永久に壁に当たらないという状態になる。
そこで位置情報のうちXの値だけ宇宙船のものを採用し、YとZは0にしてしまう。
Vectorのスケール(掛け算)でX成分のみ1倍、ほかは0倍することでX成分のみ残す。
https://docs.google.com/document/d/1GdMHotCJuTgGFewj0X95uhTl1vIS940RT8d_2eG50D4/edit?usp=sharing
いよいよ完成に近づいてきました。
残る問題は以下の3つです。
● 隕石が後ろに飛び去ったあとの処理
○ Meteor_Blueprintで宇宙船との位置関係を調べて後ろに飛び去ったと判定したら前方へ位置を変える
● 隕石との当たり判定
○ starShip_Blueprintで他の物体とあたった時の処理を記述する
● 移動制限用の壁を非表示にする
隕石が後ろに飛び去ったあとの処理(Meteor_Blueprint)
宇宙船の位置を把握する必要があるのでレベルブループリントでやったように変数として把握させる。
ただし、隕石は動的生成しているためドラッグアンドドロップでは割り当てられない。
変数を用意しておき、BeginPlayイベント時にワールドアウトライナーから探しておく
Meteor_BlueprintにStarShip_Blueprintを把握させる
GetAllActorsOfClassを使い、starShip_Blueprintの一覧を取得する。宇宙船は1つしか存在していないので一覧のうち最
初のものを変数に格納しておく(Setter)
追加分のイベントグラフ
https://docs.google.com/document/d/16r7RL1GcNDxMjhWBeUuA1XRsjbwTTIrOaaRELJIpoT8/edit?usp=sharing
Meteor_BlueprintのTickイベント
https://docs.google.com/document/d/19o5pVQ0rOseR7BFL9L5HNiZFqcUaomnPsvKvXnpS7t4/edit?usp=sharing
隕石との当たり判定(starship_Blueprint)
starship_BlueprintとMeteor_Blurprintの両方共がGenerateOverlapされていれば、
ActorBeginOverlapイベントが発生するので、
イベント発生後の処理として物理的にかかっている力を0にする。
https://docs.google.com/document/d/1Bd5H54cZ26oex7-bl-woplWYHggkUV0_SqAui0nK_LU/edit?usp=sharing
壁セットを非表示にする
完成
改造項目
● よりゲームらしく
○ 1分間でどれだけの
距離を進んだか計
測する
○ 3回ダメージでゲー
ムオーバー
○ 途中で金色の隕石
が現れて当たると無
敵になる
etc.
まだゲームになっていない状態
なので、ここからは自らの手で改
造してゲームに仕立てていってく
ださい。

More Related Content

PDF
Unity&unreal engineハンズオン資料 unity
PPTX
Unity勉強会 エフェクト
PPTX
Behaviour Tree AI in Gentou Senki Griffon (幻塔戦記グリフォンでのBehaviour Treeの試み)
PDF
Creators'night#4今井
PPTX
実写コンテンツ×3Dモデルで立体感を感じるA-Frameアプリケーション
PPTX
Unity2015_No7_~Unity2D~
PDF
Microsoft_2in1PC_ideathon_2016_ideaplant
PPTX
自動売買プログラムの作り方
Unity&unreal engineハンズオン資料 unity
Unity勉強会 エフェクト
Behaviour Tree AI in Gentou Senki Griffon (幻塔戦記グリフォンでのBehaviour Treeの試み)
Creators'night#4今井
実写コンテンツ×3Dモデルで立体感を感じるA-Frameアプリケーション
Unity2015_No7_~Unity2D~
Microsoft_2in1PC_ideathon_2016_ideaplant
自動売買プログラムの作り方
Ad

Unity&unreal engineハンズオン資料 unreal_4.8