アルゴンUE4&アプリ開発日記

UE4の機能やプラグインを紹介します。初心者や中級者向けになってます!!

UE4でOculusQuestを動かしてみよう!

OculusQuestを購入しました!(*´∀`*)

OculusQuestを購入したので、

とりあえずプロジェクトを作って動かすところまでやっていこうと思います。

CodeworkforAndroidのインストール

OculusQuestはAndroidで動作しているので、

CodeworkforAndroidをインストールして設定をする必要があります。

下記のリンクから、ダウンロードしていきます。

developer.nvidia.com

リンクをクリックしたら今回はWindowsで行っているため、

Windows版をダウンロードします。

f:id:yoshikata1990:20190615092138p:plain

ダウンロードリンク

Standardで必要なものをインストールします。

AndroidToolのNDKをインストールするのを忘れずにしましょう。

f:id:yoshikata1990:20190615094157p:plain

AndroidNDK

ここまで完了したらインストールは完了しています。

今度はOculusQuestの接続するためのドライバがあるので、

そちらをOculusQuestにインストールします。

下記の場所からドライバをダウンロードしてください。

developer.oculus.com

バイスマネージャーから直接デバイスファイルをインストールします。

f:id:yoshikata1990:20190615164838p:plain

OculusQuestのドライバ設定

OculusQuest用のプロジェクト設定

まずはプロジェクトを作成します。

バーチャルリアリティのサンプルを使用します。

f:id:yoshikata1990:20190615152826p:plain

プロジェクト設定

続いてプロジェクト設定を開いて設定します。

ターゲットハードウェアにアンドロイドが設定されていないので、

f:id:yoshikata1990:20190615155459p:plain

ターゲットハードウェアの設定

Androidを設定したら、左のエンジン項目のインプットを選択して、

モバイルのタッチインターフェースをオフにします。

※紫色の四角でドロップダウンリストがなしになっている箇所です。

f:id:yoshikata1990:20190615155208p:plain

設定が完了したらプラットフォーム欄のAndroidを設定します。

プラットフォームのファイル書き込みを許可して、

SDKバージョンやSDKLicenseなどを許可します。

f:id:yoshikata1990:20190615161101p:plain

SDKバージョンとSDKLicenseの許可

下の方にあるGooglePlayServicesのところも書き込み許可にしておきます。

f:id:yoshikata1990:20190615161240p:plain

GooglePlayServicesの設定

 最後にプラットフォームのAndroidSDKの箇所で、AndroidSDK・NDK・ANT・Javaの設定とNDKAPILevelを設定します。

※AndroidNDKの25はフォルダが無かったため26を使用しています。

f:id:yoshikata1990:20190615161447p:plain

AndroidSDK設定

プロジェクトの設定は大まかに上記の設定になります。

頑張ってミラーリングで動かしているので、

今度はちゃんと動画取れるようにしておきます。

コントローラーのブループリントの紹介

OculusQuestのモーションコントローラーのノードについて紹介します。

ノードが別で追加されているわけではありませんが下記の画像は必ず使うと思うので、

覚えておくといいと思いました。

f:id:yoshikata1990:20190615171314p:plain

ボタンやスティックの傾き数値など

一つ一つ紹介していこうと思います。

まずスティック押し込みです。これはコントローラーの右にある小さいスティックを、

押し込んだときのイベントになります。

※スティックをどの方向に倒したのかというイベントもあります。

f:id:yoshikata1990:20190615172342p:plain

スティック押し込み

スティックをどの方向に曲げているのかと言う数値も取れます。

下記の画像のノードがそれぞれ縦・横方向のスティックの傾き数値を受け取れます。

f:id:yoshikata1990:20190615172531p:plain

スティックの傾き

それ以外はコントローラーのトリガーやボタン関連のノードになります。

まずはトリガーのノードです。

※トリガーとは人差し指で引くところのボタンです。

f:id:yoshikata1990:20190615172735p:plain

トリガー入力

あとはグリップボタンと右手と左手それぞれ設定されているAB・XYボタンです。

※コメントは中指のボタンのほうが通じるかなと思ってそうしてます・・・

f:id:yoshikata1990:20190615173033p:plain

グリップボタン

f:id:yoshikata1990:20190615173328p:plain

ABボタン(右手のコントローラーボタン)

f:id:yoshikata1990:20190615173442p:plain

XYボタン(左手のコントローラーボタン)

コントローラーのイベントの説明は以上になります。

最後に・・・

発売して結構立ちますが、

まだやりたいことなどができていないので、

いろんなことを試して紹介していけたらと思います。

公式ドキュメントも英語ですがあるので、そちらも参考にしていきましょう!

【UE4】マテリアルとマテリアルインスタンスの簡単な紹介

マテリアルとマテリアルインスタンスについて

マテリアルなどを説明してこなかったので、

今回はマテリアルとマテリアルインスタンスを説明していこうと思います。

マテリアルの作成について

まずはマテリアルファイルを追加します。

コンテンツエディタを右クリックしてマテリアルを選択します。

f:id:yoshikata1990:20190520225851p:plain

マテリアルファイルの追加

マテリアルファイルを追加したらマテリアルファイルを開くと

マテリアル用のノードを反映するメインのマテリアルノードがあります。

f:id:yoshikata1990:20190523215944p:plain

マテリアルファイル

メインマテリアルの入力で設定できる説明については、

マテリアル入力の説明はリファレンスで見るのが分かりやすいです。

api.unrealengine.com

個人的によく使い覚えておきたいマテリアルノードを少し紹介していきます。

Constant(定数)

これはどのようなマテリアルを作るときも使うことになると思うので、覚えておきましょう。

左上が1つの定数を指定するもので右上が2つ(色で言うと赤と緑)の扱いです。

左下が3つ(RGB)です。右下が4つ(RGBA)となります。

1つの定数の場合はメインマテリアルに直接接続して値を指定しておいたり、

この後説明する演算などで使われたりします。

2つの場合は2つの定数を指定するマテリアルノード(TexCoord)などで活用しています。

3つの定数や4つの定数は固定した色を指定するときに使ったりします。

f:id:yoshikata1990:20190525082615p:plain

Constant(定数)

このノードを検索して追加するときは、「C」を入力すると一番最初に指定されます。

f:id:yoshikata1990:20190525084201p:plain

Cキーで検索をかけた場合

テクスチャとマスク

マテリアルを作成する上でテクスチャを使って凹凸を表現したり、

マスクを使ってRGだけにしたりとかする事があります。

そういった場面で使われるのが下記のTextureSampleとMaskです。

※Maskの正式名称はComponentMaskです。

f:id:yoshikata1990:20190525084234p:plain

テクスチャサンプルとマスク

TextureSampleの出力値はテクスチャ内の色(RGB・1色ごと・RGBA)になっています。

MaskはRGBAの最大4つの値を持てます。値のValue数をあわせたりするときに使えたり活用するところは多くあります。

追加する場合は、TextureSampleでは「Text」まで打つと検索に引っかかります。ComponentMaskは「Mask」と打ちましょう。

四則演算(Add・Subtract・Multiply)

マテリアルにも四則演算がありこちらも良く使います。

色の計算で見るとAddは単純にRの加算しています。

白(R:1,G:1,B:1)の箇所はAddしても色の変化はありません。

Multiplyでは白い箇所を赤くしています。

色のある箇所(白の箇所)を赤色にしています。

Subtractでは全体に赤を減算しています。

白い箇所は赤色がなくなっているため青緑になっています。

f:id:yoshikata1990:20190525095838p:plain

四則演算結果

追加する場合は、Addでは「ad」まで打つと検索に引っかかります。Multiplyは「Mu」まで打つと検索に引っかかります。Subtractは「su」まで入力すると表示されます。

lerp(LinearInterpolate)

lerpは線形補完と呼ばれるを行うノードになります。

入力先はAlpha(下の画像では画像をアルファに設定しています)があり、

AとBではそれぞれ指定した画像の赤の色が使われている箇所にAの値が使われて、

赤色が使われていない箇所にはBが適応されていきます。

f:id:yoshikata1990:20190526075701p:plain

lerpの簡単なサンプル

追加する場合は、lerpは「l」で検索に引っかかります。

他にもブレンドなどもっと説明する必要がありますが、

もっと細かい説明を他のタイミングで説明していこうと思います。

簡単なマテリアルを作る

今回は簡単なマテリアルを紹介していきます。

下の画像は簡単な金属っぽいマテリアルになります。

f:id:yoshikata1990:20190526083659p:plain

メタリックなマテリアル

ベースカラーに色を加算してピンク色を作り、

メタリックを1にして光沢を出しつつ、ラフネスを下げて反射する形にしています。

完成したマテリアルのサンプルがこんな感じになります。

f:id:yoshikata1990:20190526084739p:plain

メタリックのサンプル

マテリアルインスタンスにして管理する

マテリアルを作成した後でマテリアルはそのままで、

マテリアルに設定した値などを切り替えたりすることが多々あるので、

マテリアルインスタンスで指定した値を切り替えするようにします。

スイッチなどもあるのでぜひ使っていきましょう。

マテリアルファイルを右クリックしたときに、

一番上にマテリアルインスタンスを作成が出るのでそれを選択します。

f:id:yoshikata1990:20190526091417p:plain

マテリアルインスタンスの作成

マテリアルインスタンスのファイルを作成したら、

マテリアルインスタンス用に元のマテリアルファイルを改造します。

先程のメタリックのマテリアルにSwitchやConstantを、

パラメーターに変更したりします。

f:id:yoshikata1990:20190526095105p:plain

パラメータ変更とスイッチの追加

Constantで設定したパラメータはParamとして、

定数から変数に変更することができます。

変更方法は、右クリックでパラメータに変更を選択が可能です。

f:id:yoshikata1990:20190526101052p:plain

パラメータ変換

SwitchParamについては、StaticSwitchParameterが正式名称で

TrueとFalseでそれぞれ適応したいパラメータを指定します。

デフォルトはFalseの状態になります。

設定したマテリアルのパラメータやスイッチなどは

マテリアルインスタンスで変更できます。

※紹介しているのは一部です。

f:id:yoshikata1990:20190526102709p:plain

マテリアルインスタンスのパラメータ設定

上記の画像のようにパラメータを変更するだけで、

下の画像のように全く別のマテリアルを作ることができます。

f:id:yoshikata1990:20190526102828p:plain

マテリアルインスタンスでパラメータ変更後

マテリアルインスタンスについては通常のマテリアルと同様に、

スタティックメッシュなどにマテリアルの代わりとして設定することができます。

f:id:yoshikata1990:20190526103255p:plain

マテリアルインスタンスの適応

下の絵はベースのマテリアルと設定を変更したマテリアルインスタンスを、

それぞれ適応した場合の画面になっています。

f:id:yoshikata1990:20190526103540p:plain

ベースのマテリアルとマテリアルインスタンス

マテリアルインスタンスは一つのベースを使い、

パラメータやスイッチなどの設定次第で様々なことができるので、

ぜひ活用してみてください\(^o^)/

最後に

今回はマテリアルブレンドや下の動画のマテリアルレイヤーなどの、

説明は行っていないので、そちらの説明も今後していけたらと思います。

※いつやるんだろう(;^ω^)・・・

www.youtube.com

いろいろな動画でマテリアルの説明は行われているので、

ぜひレベルアップしていきましょう(・∀・)

【UE4】ポストプロセスを使ってみる(その2)

ポストプロセスマテリアルを作ってみる。

今回はポストプロセスマテリアルの簡単なものを作りたいと思います。

マテリアルの部分も少し説明できたら嬉しいです。

下記の動画を参考にしてました。

www.youtube.com

それではポストプロセスのマテリアルの適応やマテリアルの紹介などを行っていこうと思います。

ポストプロセス用のマテリアルを作る。

今回はポストプロセス用のマテリアルを作って動かしていきます。

まずマテリアルのファイルを使いする必要があるので新規で追加します。

コンテンツブラウザを右クリックして追加します。

f:id:yoshikata1990:20190425211411p:plain

マテリアル追加

追加したらマテリアルドメインをPostProcessに変更します。

先ほど作成したマテリアルファイルを開いてすでに追加されている

マテリアルノードを選択して、詳細から「MaterialDomain」を変更します。

最初はSurfaceになっているのでPostProcessにします。

f:id:yoshikata1990:20190425214207p:plain

マテリアルドメインをPostProcessを変更

今回はマテリアルのパラメータをBPから変更できる、

マテリアルパラメータコレクションも使っていきます。

マテリアルを追加する容量で、詳細なアセットからマテリアル・テクスチャの「マテリアルパラメータコレクション」を追加します。

f:id:yoshikata1990:20190425215223p:plain

マテリアルパラメータコレクション

今回設定したマテリアルパラメータコレクションは、

このような形で設定しています。

下の画像のあとにこのマテリアルパラメータコレクションをどう使うのか説明していきます。

f:id:yoshikata1990:20190425220036p:plain

マテリアルパラメータコレクションの設定

上記のマテリアルパラメータコレクションと組み合わせたポストプロセスマテリアルがこちらになります。

今回やっていることは単純で、

1.キャラクターの位置をBPから取得してマスクを使いFloat3に変換する。

2.円の半径をBPのTimelineで動かした数値を取得する。

3.上記2つの情報を元に球状に明るくしていくマスクを追加

f:id:yoshikata1990:20190425220326p:plain

PostProcessのマテリアルノー

マテリアルの設定が完了したら動作させるため、

キャラクターのBPの設定をしていきます。

マテリアルパラメータコレクションのPositionというパラメータに、

キャラクターの位置情報を渡しています。

f:id:yoshikata1990:20190425223019p:plain

BPの設定

こちらも合わせて設定しています。

タイムラインでマテリアルパラメータコレクションの半径の値を設定してます。

f:id:yoshikata1990:20190425223233p:plain

明るさの半径をタイムラインの値で渡す。

実際のマテリアルを動かすとこんな感じになります。

ポストプロセスマテリアルに当てはめて動作させる。

あとはPostProcessVolumeのマテリアルにセットして完了になります。

f:id:yoshikata1990:20190425224142p:plain

ポストプロセスボリュームの設定

最後に・・・・

ポストプロセスマテリアルはマテリアルを作るためのノードの知識

視覚効果の数学も知っておくといろいろなものが作れて楽しいです(・∀・)

下のものは今回やったことの応用になっています。

ぜひいろんなことを覚えて自分のゲームに合う効果を作ってみてください!

【UE4】ポストプロセスを使ってみる(その1)

PostProcessで演出をよりきれいにする。

今回はポストプロセスの説明やマテリアルなどを紹介していきます。

下記のスライドシェアで公開しているポストプロセスの紹介が、

とても分かりやすいのでこちらを見て勉強するのがいいかなと思います!

(下のスライドがわかり易すぎるので、自分の説明いらな・・・・)

www.slideshare.net

公式サイトにもポストプロセスエフェクトの紹介が細かく書いてあるので、

こちらも確認してみるといいと思います!

api.unrealengine.com

ポストプロセスってなに?

ポストプロセスと言うのはレンダリングされた状態を元に行われる、

画像処理のことを指します。

UE4では様々なポストプロセスが用意されていて、

ポストプロセスを使ってよりリアリティのある表現にしたり、

表現をよりリアリティにしたりできます。

※説明に誤りがあったらコメントお願いします!

簡単なポストプロセスの紹介

ここからはそれぞれどのようなポストプロセスの設定が用意されているか、

機能別サンプルのポストプロセスサンプルを用いて説明していきます。

※ここで紹介しているのは一部です。

f:id:yoshikata1990:20190330151608p:plain

Film(フィルム)

まずはフィルム(Film)から。

これは画面の色合いの調整などで使われることがあります。

白とびや黒つぶれなどの軽減とかに使ったりしてます。

f:id:yoshikata1990:20190330153730p:plain

Bloom(ブルーム)

こちらはBloom(ブルーム)になります。

発光現象を表現するポストプロセスになります。

ライトなどで自然な明るさなどを表現するときに使ったりします。

f:id:yoshikata1990:20190330155355p:plain

明暗の順応(AutoExposure)

こちらは明暗の順応(AutoExposure)になります。

暗いところから明るいところへの光の取り込みの変化を表したり、

逆に暗いところから明るいところへの光の取り込みを表現します。

f:id:yoshikata1990:20190330162418p:plain

レンズフレア(LensFlares)

こちらはレンズフレア(LensFlares)になります。

カメラレンズの明るさの散乱をシミュレートして表現します。

太陽の日差しとか表現したりしてます。

f:id:yoshikata1990:20190330165313p:plain

モーションブラー(MotionBlur)

モーションブラーをポストプロセスで表現できます。

高速で動いているものに残像が残るような感じで表現されます。

f:id:yoshikata1990:20190330172906p:plain

ScreenPercentage(解像度変更)

スクリーンパーセンテージという設定もあります。

低解像度にしてぼやけさせるという設定になります。

他にも被写体深度とかありますが、それは今後で紹介していきます。

ポストプロセスを設定してみる!

ここからはポストプロセスの設定を設定していきます。

今回は下記のマケプレでやってるのを使っています。

www.unrealengine.com

まずプロジェクトでポストプロセスがONになっているかを確認します。

f:id:yoshikata1990:20190330200452p:plain

プロジェクト設定(レンダリング)

続いてポストプロセスを適応するポストプロセスボリュームを、

レベル上に配置します。

f:id:yoshikata1990:20190330200822p:plain

ポストプロセスボリュームの配置

配置が完了したら詳細でポストプロセスの設定をします。

今回は光ってる感じを出そうと思うのでBloomを使ってみます。

f:id:yoshikata1990:20190330202148p:plain

Bloomの設定

今回はstandardで設定しています。

設定パラメータについては下記です。

Method:StandardとConvolution(畳みこみ)にするかの切り替え

Intensity:ブルームが適応される強さです。光の強弱です。

Threshold:ブルームに影響を与えるカラーの輝度を指定します。

        -1にすると全ての色に適応されます。

もう少し細かい活用法はその2で説明をしていこうと思います!

ポストプロセスをブルームのアリとナシを比較したのは下記になります。

最後に・・・

今回はポストプロセスがどういったもので、

どういったものかを少し説明させていただきました。

レベル的には超初心者レベルだと思うので、

もう少し細かい説明やポストプロセスマテリアルとの組み合わせなどは、

その2で説明していこうと思います。

ありがとうございました!!

【UE4】VirtualCameraPluginを試してみる(・∀・)

VirtualCameraPluginを試してみる。

今回はiPadやViveTrackerなどからシネマカメラとして操作できる、

VirtualCameraPluginを試してみようと思います。

UE4のバージョンは4.21.2使用していきます。

iOSでのやり方を紹介します。

プロジェクトのセットアップ

まずはプロジェクトで使用するプラグインを追加します。

必要になるのはVirtualCameraとRemoteSessionになります。

f:id:yoshikata1990:20190224212310p:plain

VirtualCameraプラグイン

f:id:yoshikata1990:20190224212407p:plain

RemoteSessionプラグイン

今回はiOSで行っておりARKitを使用するので、

AppleのARKitも一緒に追加しておきます。

f:id:yoshikata1990:20190224212351p:plain

iOSのARKitプラグイン

プラグインの追加をしたら一度再起動します。

再起動をおこなったらGameModeをVirtualCameraGameModeを設定します。

f:id:yoshikata1990:20190224215817p:plain

ゲームモードの設定

今回はiPadで接続するので画面の設定をiPadに合わせています。

それぞれ使うデバイスに合わせてください。

f:id:yoshikata1990:20190224225703p:plain

ビューポートセッティング

プロジェクトの設定はこれで完了です。

ActiveEditorModeから新規エディタウィンドウ設定で

f:id:yoshikata1990:20190224231721p:plain

プレイの設定

起動してVirtualCamera用のビューを表示したら完了です。

f:id:yoshikata1990:20190224233045p:plain

PC側の起動画面

iPadでの動作チェック

iPadで動作させるために、あらかじめ下記のUnrealRemote2をダウンロードします。

Unreal Remote 2

Unreal Remote 2

 あとはwindowsであればipconfigでIPアドレスを確認して、

アプリにIPアドレスを入力して接続すれば完了です。

実際に動かすと下記のような感じになります(・∀・)

最後に

今回はただ単純に気になって動かしてみただけという感じです。

ゲームとして使うというより面白いPVだったり、

どんな感じのレベルデザインになっているか確認したりするのに使うのがいいかも?