UE4 「Download Image」を使ってみる
先日このようなノードを見つけました。
「Download Image」というノードです。
気になって少し調べてみたら、
結構記事がありました。
UE4で外部ファイルを扱ってみる - EagleGames 制作メモ
UE4 画像ファイルをURL指定でダウンロードする(Download Image) 凛(kagring)のUE4とUnityとQt勉強中ブログ
これらの記事を参考にしつつ、
触っていきたいと思います。
準備
今回はUE4 4.15.1を使用しています。
Widgetを作成する
プロジェクトを作成後、
コンテンツブラウザを右クリック→User Interfaceから
Widget Blueprintを作成します。
適当な名前をつけましょう。
作成したWidgetを開きます。
まずは変数を一つ作成しましょう。
Texture 2DDynamic型の変数に
DownloadTextureという名前をつけます。
次にPaletteからImageをひとつ出します。
どこか分かりやすいところに出しておきましょう。
このImageを選択した状態で
DetailタブのBrushにBindを作成します。
Create Bindingをクリックしてください。
そして作成した関数にはこのように処理を書きましょう。
変数(今は何も入っていない)のTextureデータを
Imageに入れます。
この関数はPureのチェックを外しておきます。
Event GraphのEvent Constructから
このような処理を書きます。
URLは適当に何か入れておきます。
今回は私のTwitterアイコンを描画してみます。
Download ImageでURLから画像を取得し、
作成した変数に格納します。
そして、先程の関数を呼び出す感じです。
Widgetを描画する
レベルブループリントを開きます。
そしてWidgetを描画しましょう。
確認してみる
はい。私のTwitterアイコンが描画されました。
余談
ノードの中身を見てみると対応している
フォーマットはPNG, JPEG, BMPの3つのようです。
さらっと読んだだけなので、間違っている可能性がありますので
余談とさせていただきます。
ミスがありましたら、ご教授いただけると幸いです。
UE4 Background Blurを使ってみる
Unreal Engine4 4.15のリリースノートを眺めていたときに
Background Blurというものを見つけました。
使ってみたら簡単かつ面白かったので、
今回はこのBackground Blurについて書きたいと思います。
Background BlurとはWidgetを使用して、
背景などをぼかすことのできるものです。
ポーズ画面などで使用すると雰囲気が出るかもしれません。
ではやっていきます。
プロジェクトを作成する
今回はUE4 4.15.1を使用します。
Third Personテンプレートを選択しプロジェクトを作成します。
プロジェクトが作成されました。
Widgetを作成する
コンテンツブラウザから右クリック
User Interface→Widget Blueprintを選択します。
作成されたWidget Blueprintに適当な名前を付けます。
今回はWidget_BlurTestという風にしました。
このWidget_BlurTestをダブルクリックで開きます。
この作業は必須ではありませんが、
TextやButton、Borderなどを適当に配置します。
Background Blurを追加する
左上のPaletteから
Special Effects→Background Blurを
ドラッグアンドドロップで配置します。
今回は画面全体に重なるように配置しました。
右側のDetailsタブの中に
Blur Strengthというパラメータがあります。
このパラメータの値を10に変更しましょう。
このパラメータは0 ~ 100の間でぼかしの強さを
変更することができます。
0だとぼかしはかかりません。
ぼかしはかかりましたが、
このままではUIも一緒にぼけてしまいます。
そこでDetailsタブのZOrderの値を-1に変更します。
ZOrderは数値が大きくなるほど手前に描画されます。
また初期値が0のため-1にするとBlurは一番奥に描画されます。
こんな感じになると思います。
Widgetを描画する
レベルブループリントを開きましょう。
このようにPキーを押すと先ほど作成した
Widgetが描画されるようにします。
実行してみる
プレイボタンを押して実行してみます。
Pキーを押します。
上手くいきました。
ぼかしの強さをアニメーションで変更する
ぼかしの強さを変更するBlur Strengthはアニメーションさせることも
可能なようです。
Widgetアニメーションを作成し、
1秒間隔で0→100→0とBlur Strengthを変更する
アニメーションを組みます。
するとこのようになります。
UE4 見たら消えるオブジェクトを作ってみる
タイトル通りのものを作っていきます。
プレイヤーからLine Traceを飛ばし、
その衝突時に特定のオブジェクトが衝突していれば、
オブジェクトを削除するというものです。
ミニゲームくらいなら作れそうですね。
準備
今回はUE4 4.15.0を使用します。
First Personテンプレートでプロジェクトを作成してください。
Line Traceを出せるようにしてみる
まずはプレイヤーの処理から書いていきましょう。
First Person BP / Blueprintsから
First Person Characterのブループリントを開いてください。
移動処理や、弾を発射する処理など書かれていますが、
それとは別に、このような処理を書いてください。
Event TickからLine Trace By Channelへ繋いでいます。
LineTraceの開始座標はFirst Person Cameraのワールド座標。
終了座標はFirst Person CameraのGet Forward Vectorに
Line Traceの長さを乗算したものとFirst Person Cameraの
ワールド座標を加算した値です。
このLine Traceはプレイヤーの視線を判定するものです。
Line Trace By Channelを使用していますが、
Sphere Traceでも可能ですので好きな方を使ってください。
ここまで処理を書いたら実行して確認してみましょう。
このようにカメラからLine Traceが出ていると思います。
もし出ていない場合はLine Trace By Channelの
Draw Debug TypeをFor Durationに変え忘れていないかなどを
確認してみてください。
発見用のオブジェクトを作成する
次に発見用のオブジェクトを作成します。
コンテンツブラウザから右クリック
Blueprint Classを選択してください。
親クラスはActorで作成します。
作成できたらファイル名をBP_Targetとしましょう。
BP_Targetを開いてください。
左上のAdd Componentから
Box Collisionを追加します。
同じようにAdd ComponentからCubeを追加します。
Cubeでなくても構いません。
Static MeshやSkeletal Meshでも大丈夫です。
今回は見た目を気にせず分かりやすさ重視でCubeを選択しました。
Cube以外を使う場合にはBox CollisionもMeshの形に合わせて変更してください。
Cubeの大きさに合わせてBox Collisionの大きさを変更します。
Collision Typeの変更をします。
CubeをNo Collisionにしてください。
Box Collisionは下記の画像のようにしてください。
Line Traceの判定をとるためにVisiblityが
Blockであれば他は自由に変更して大丈夫です。
Material Functionを作成する
消滅時に発生するエフェクトをマテリアルで表現しましょう。
細かい処理などは過去記事を見てください。
コンテンツブラウザから右クリック
Material Functionを選択してください。
ファイル名をMFunc_Dissolveとします。
過去記事にも同じものを挙げていますが、
解像度が低くて見づらいという声が多かったため、
解像度の高いものを用意しました。
Appear Timerの値に合わせてNoiseの形に透過していく処理です。
全体図の方
全体図じゃない方
Noiseのパラメータはこのようになっています。
マテリアルに処理を書く
Cube MeshにはBasic Shape Materialという
マテリアルがDefaultで適応されています。
先ほど作成したMFunc_Dissolveを
このBasic Shape Materialに適応しましょう。
Engine Contents / Basic Shapeから
Basic Shape Materialを開いてください。
最終結果のパラメータのBlend Modeを
Maskedに変更します。
Material Function CallでMFunc_Dissolveを呼び出し、
Emissive ColorとOpacity Maskを最終結果に繋ぎます。
Material Instanceを作成する
コンテンツブラウザに戻り、
Basic Shape Materiaを右クリックし、
Create Material Instanceをクリックしてください。
Material Instanceを作成しました。
(色が違うのはスクショを撮り忘れて後で撮ったからです)
作成したMaterial Instanceを開いてください。
パラメータを画像のように変更します。
BP_TargetのCube Meshのマテリアルを作成した
Material Instanceに変更しましょう。
発見用オブジェクトの処理を書く
BP_Targetの編集を行っていきます。
BP_Targetを開いてください。
Construction Scriptにこのような処理を書きます。
CubeコンポーネントのマテリアルをDynamic Material Instanceとして
作成し、DMIという変数に格納しています。
イベントグラフの処理です。
Custom Eventを作成し、Meltという名前を付けます。
作成したCustom EventからTime Lineへ繋ぎ、
DMIのパラメータを変更する処理を書きます。
Time Lineが終了したらDestroy Actorに繋ぎ、
BP_Targetを削除します。
Time Lineの中身です。
0秒時に値を1
2秒時に値を0
とする直線のTime Lineです。
これでBP_Targetの処理はすべて書き終わりました。
Clear Widgetを作成する
なくても困らないですが、
動画で出していたクリア時のWidgetを作成します。
コンテンツブラウザから右クリック
User Interface / Widget Blueprintを選択してください。
名前をWidget_GameClearとします。
Widget_GameClearを開いてください。
Textを一つ配置し、適当な文字とサイズにします。
これだけ
プレイヤーの処理を追加する
最後の工程です。
プレイヤーに処理を書きます。
First Person Characterを開いてください。
Line Traceの処理を書いた箇所に
下記の画像のように処理を追加してください。
Line TraceのDuration TypeをNoneに戻すのも忘れずに。
レベル上にBP_Targetが残っているかの判定を行い、
残っていればLine Traceを飛ばし、Line Traceの衝突した
ActorがBP_TargetであればBP_TargetのMelt関数を呼び出します。
BP_Targetがレベル上に残っていなければ、
Widget_Clearを描画します。
これで処理はすべて書きました。
実行して確認してみてください。
ページ上部の動画のようになります。
Oculus Rift CV1とOculus Touchをセットアップしてみる
先日Oculus Rift CV1とOculus Touchが届きました。
なんていうか箱がかっこいいです。
DK-2の頃のダンボール感あふれる箱も
嫌いではなかったのですが、
今回の箱は高級な感じがします。
(ただ大きいので持ち運びはどうするか検討中)
中身を確認する
Oculus Rift CV1の方の中身はこんな感じです。
・HMD本体
・Oculus Remote
・ポジショントラッカー
・説明書兼保証書
・Xbox Oneのコントローラー
・XboxコントローラーのUSBケーブル
・Xboxコントローラーの説明書
・Oculusのシール2枚
・レンズグロス(メガネ拭きのアレ)
Oculus Touchの方の中身はこんな感じです。
・Touchコントローラー2個
・ポジショントラッカー
・RockbandVR用の固定具
・説明書兼保証書
・単三電池2個
本題
セットアップをやっていきたいと思います。
公式のスタートガイドもあります。
https://product-guides.oculus.com/en-us/documentation/rift/latest/concepts/book-rgsg/
きちんとセットアップをしたい方は
こちらを読んだ方がいいと思います。
セットアップツールを入手する
こちらのサイトからセットアップツールをダウンロードしましょう。
Start Downloadのボタンをクリックすると
ツールのダウンロードが始まります。
ダウンロードが完了後、
ダウンロードしたOculusSetup.exeを開きます。
Oculus Softwareのダウンロードをする
OculusSetup.exeを開くとこんな画面になると思います。
現時点では日本語がないため、英語のままLet's Goのボタンをクリックします。
プライバシーポリシーの同意画面です。
Agreeを選択してください。
健康と安全についての注意事項です。
この画面では10秒間待機した後に
次に進めることができます。
カウントダウンが表示されているボタンが
押せるようになったら次へ進んでください。
アプリケーションを保存するパスの設定です。
特に理由がなければデフォルトのままでいいでしょう。
Oculus Softwareのインストール画面です。
Install Nowのボタンをクリックするとインストールが始まります。
インストールを開始するとこの画面になります。
少しの間待機しましょう。
イントールが完了しました。
Nextのボタンをクリックし、次の画面へ進んでください。
Oculusアカウントを持っていない方は右下のCreate Accountをクリックし、
Oculus Accountを作成してください。
私はOculus Accountを持っていたため左下のSign Inをクリックし、
サインインしました。
Oculus Rift CV1とOculus Touchのセットアップを行う
次にセットアップする機材を選択します。
今回はCV1とOculus Touchのセットアップを行うので、
Rift and Touchを選択し、Nextをクリックします。
Nextをクリックしてください。
全て挿し終えるとステータスのところに
チェックマークが入りOKと出ます。
この状態になったらNextをクリックしてください。
Oculus Remoteのセットアップを行う
一応Skipすることもできます。
右の図の通りに操作をするとステータスのところに
チェックが入りOKと出ます。
この状態になったらNextをクリックしてください。
Oculua Remoteの説明が表示されます。
Continueボタンをクリックして次に進みましょう。
Xbox Oneのコントローラーのセットアップを行う
無線化も出来るようですが、受信機を持っていないため、
Xbox OneのコントローラーをUSBでPCに繋げました。
Continueボタンをクリックして次に進めます。
接続が確認されたらチェックマークとOKの表示が出るので、
Nextボタンを押します。
Xbox Oneのコントローラーの説明が表示されます。
Continueボタンをクリックして次へ進んでください。
Oculus Touchのセットアップを行う
Oculus Touchに電池を入れてくださいと表示されます。
電池を入れて。Nextボタンを押してください。
Oculus Touch側面のカバーをうまいこと外し、
中に単三電池を入れてください。
単三電池はOculus Touchの箱のここに入っています。
(私は気づかず買いに行きました)
左手用のTouchをセットアップします。
TouchのメニューボタンとYボタンを2秒ほど押し続け、
ペアリングを行います。
画像のようになったら、Nextボタンで次へ進んでください。
同様に右手のTouchもセットアップします。
OculusボタンとBボタンを2秒ほど押し続けてください。
画像のようになったらNextボタンを押します。
Oculus Touchの操作説明です。
Nextボタンを押してください。
ファームウェアのアップデートを行う
Update Nowのボタンをクリックしてください。
しばらく待機しアップデートが終わるのを待ちます。
アップデートが完了したら、
Continueボタンをクリックしてください。
私はここでエラーが出てしまったので、
Try Againをクリックし、
Oculus Touchのセットアップからやり直しました。
センサーのセットアップを行う
USB3.0で接続しましょう。
チェックマークとOKの表示が出たら、
Nextボタンをクリックします。
センサーに付いているフィルムを剥がし、
Nextボタンをクリックします。
立っている場所から目の高さまでの距離を入力します。
入力が終わったらNextボタンをクリックしてください。
広さを確保して
Nextボタンをクリックしてください。
センサーを1~2メートルの間隔で設置してください。
私の環境では1メートル少し足りないくらいの距離で設置していますが、
今のところ特に問題ありません。
トラッキングのセットアップを行う
Nextボタンを押してください。
この円形の範囲内で目の高さにTouchを持っていき、
トリガーを2秒ほど押し続けてください。
うまい具合に設置して、Nextボタンをクリックしてください。
次にVR空間内の壁作りをします。
狭い場所に設置している方は、丁寧にやった方が
リアルの壁に手をぶつけることもなくなると思います。
私は適当にしました。
Continueボタンをクリックしてください。
I Understandボタンをクリックして
注意事項に同意しましょう。
Oculus Rift CV1のセットアップを行う
Nextボタンをクリックしてください。
説明が表示されます。
Nextボタンをクリックしてください。
自分に合わせてベルトなどを調節しましょう。
割りと深めに被った方が安定感があります(個人的に)
Nextボタンをクリックしてください。
私はLens Soacingを65mmに設定しました。
Nextボタンをクリックしてください。
被っていたらチュートリアル的なのが始まります。
セットアップ終わり。
UE4で動かしてみる
セットアップが終わったので、UE4上で動作するか確認しました。
リアルなレンダリングのプロジェクトを開き、
VRプレビューで見てみます。
映りました。
簡単過ぎて涙が出てくる。
Oculus Touchの方は確認してませんが、
近いうちにまた記事にしたいと思います。
UE4 地面の種類を判別して足音を再生する
UE4の足音の再生に関しては
たくさんの方がブログなどに既に書かれていますが、
私が普段書いている処理を少し書きたいと思います。
詳しい処理の内容が知りたい方はこちら
ではやっていきます。
準備
今回はUE4 4.14.3を使用します。
プロジェクトを作成し、
Third Personテンプレートで起動します。
使用するファイルはこちらです。
同じ種類の地面につき8種類の音声ファイルを用意しました。
わかりやすい地面を作成する
※これはしなくていい作業です。
ブログを見やすくするために作成しました。
BSPを適当なサイズでStatic Meshにし、
適当なCollisionをつけています。
そして、適当に並べてStarter Contentsの中にあった
それっぽいマテリアルを適応します。
左から「土」「フローリング」「水溜まり」です。
Sound Cueファイルを作成する
Sound Cueファイルはこんな感じになっています。
地面の種類に応じて8種類の音からランダムで選択再生します。
Randomノードの先には
Int Parameter 「GroundType」を持った
Switchノードがあります。
このノードで次のPhysical Surfaceと紐づけをします。
Physical Surfaceを設定する
Project設定を開き、左側のPhysicsを選択します。
そのページの下の方にあるPhysical Surfaceの設定を行います。
Surface Typeに判別したい地面の種類を書き込んでいきます。
Sound CueのSwitchノードにつないだ、
音と同じ順番になるように記述してください。
Physical Materialを作成する
コンテンツブラウザを右クリック
Physics→Physical Mterialを選択します。
Physical Materialを選択し、Selectを押します。
Physical Materialを必要分作成し、
それぞれこのような名前をつけました。
Physical Materialを開き、先ほどProject設定で
作成したSurface Typeを適応していきます。
PM_WoodならWood、
PM_WaterならWaterという感じです。
作成したPhysical Materialをそれぞれの地面に設定します。
レベルに配置してあるMeshを選択し、
Phys Material Overrideに適応したいPhysical Materialを設定します。
処理を書く
私自身サウンド部分を担当することは多いですが、
再生部分の実装はあまり行わないので
今回はFunction Libraryを使用して処理を書きます。
コンテンツブラウザを右クリック
Blueprints→Function Libraryを選択します。
作成したFunction Libraryを開き
PlayFootStepという関数を新規追加します。
処理の全体図です。
もう少し短縮できると思うのですが、
今回はこれで行きます。
引数にPawn OwnerというActor型の変数を用意しています。
引数から得たActorのLocationを取得し、足元の判定範囲を
Line Traceに流しています。
デバッグ用にLine Traceを視覚化しています。
そのLine TraceのHit判定を利用し、足元のPhysical Materialを検出します。
Physical Materialが検出できたら、ActorのRoot Conponentに
足音用のSound CueをAttachします。
Selectノードはひし形の部分を右クリックし、
Change Pin Typeを選択します。
ここでIntegerを選択して下さい。
すると上のスクリーンショットと同じ形になります。
AttachしたSound Cueの中にあるGround Typeを変更します。
その後Play Sound For Data TableでSound Cueを再生します。
Play Sound For Data Tableについては
過去記事を参照してください。
これで実装部分の処理は完了です。
アニメーションの通知設定を行う
実装部分の処理は書いたので、
次は呼び出し処理の準備を行います。
Third Person Runというアニメーションを開いてください。
先ほどの関数の呼び出しには
Anim Notifyを使用します。
アニメーション中の足が丁度地面に着くぐらいの
ところにAdd Notify→New Notifyを選択し
FootStepという名前の通知を追加します。
通知が追加されると、こんな感じになると思います。
このアニメーションには2回足が地面に着くので、
もう一方の方にも通知を追加します。
呼び出し処理を書く
Third Person AnimBPを開いてください。
アニメーションブループリントの
イベントグラフにEvent AnimNotify_FootStepを追加します。
Event AnimNotify_FootStepが追加できたら、
作成した関数のPlayFootStepを呼び出します。
関数の引数には、Try Get Pawn Ownerから
取得できる情報を渡しましょう。
これでアニメーション通知を作成したところで
サウンドが再生されます。
確認してみる
Physical Materialを適応した箇所で
指定したサウンドがなっていると思います。
UE4 4.14.3でフリーズしてしまう対処法
私の環境ではUE4 4.14.3で
ブループリントエディタやスケルタルメッシュを開くと
必ずフリーズしていました。
フリーズはしないけど、UE4エディタを
軽くしたいという方はこちらを参考にしてください。
実際はある方に解決策を教えていただいたのですが、
いくつかの対策を試してみましたので、
物忘れの激しい私のメモとして書いておきたいと思います。
私の環境
MacBookにboot camp windowsを入れて、使っています。
お世辞にもUE4を動かすのに適した環境とは言えませんが、
4.13より前は拡張機能設定がEpicでも普通に動いていました。
(FPSは落ちていましたが...)
DerviedDataCacheを削除してみる
詳しくはこちらをご覧ください。
フリーズし始めたころにboot campを
クリーンインストールしたばかりなので、
キャッシュは溜まっていなかったのですが
一応やってみました。
このDerivedDataCacheをフォルダごと削除します。
AppDataは隠しファイルになっています。
AppDataが見つからないという方は
エクスプローラーの表示から隠しファイルにチェックを
入れると見えるようになると思います。
IMEを切り替えてみる
Answer hubを漁っているとこのようなページを見つけました。
Microsoft IME 2010を使用しているとBlueprintのコンパイルが異常に遅くなる - UE4 AnswerHub
このページではフリーズするとは書いていないものの、
動作が全体的に遅くなるというのは、
共通してたので試してみました。
Microsoft IMEがアクティブだと重くなってしまうようなので、
その他のIMEを入れてみます。
英語キーボードの設定を行います。
Windowsの設定を開きます。
2段目の左から2個目の時刻と言語を選択します。
左側のタブから地域を言語を選択し、
右側の言語タブから言語を追加するを選択します。
Englishを選択します。
一番下にEnglish(United States)があるので
これを追加します。
これで、IMEを切り替えれば
英語キーボードになると思います。
当然日本語は打てなくなりますので、
日本語を使いたいという方は
おすすめします。
こちらのページからGoogle 日本語入力IMEをダウンロードしてください。
それぞれの設定が終わったら、
Windowsキー + スペースキーでIMEの切り替えを行います。
UE4の起動中にIMEをMicrosoft IMEに切り替えると、
フリーズしてしまうようなので要注意です。
まとめ
とりあえず、私の環境では
フリーズを回避できています。
ただ、コメントなども英語でしか
打てなくなってしまっているので
早めに対策されることを願っています。
UE4 銃の弾が壁などに衝突した際の弾痕を実装する
現実の世界では銃弾が壁に当たると
ちょっと削れますよね?
今回はその弾痕の処理を実装します。
参考にしたサイトはこちら
ベクトルの計算を使用していますが、
こちらのサイトに詳しく解説されています。
ではやっていきます。
準備
UE4 4.13.3を使用します。
FPSテンプレートでプロジェクトを作成してください。
使用する弾痕のテクスチャを用意します。
※256x256の.pngです。
テクスチャを用意したら、
プロジェクトにインポートしてください。
(鮮やかだなぁ...もっと暗い色にすればよかった)
必要なものを揃える
読み込んだテクスチャを右クリックします。
Sprite Actions→Create Spriteを選択してください。
Spriteが作成されます。
次に弾痕用のブループリントを作成します。
コンテンツブラウザを右クリック→Blueprint Classを選択します。
親クラスはActorを選択します。
作成したブループリントを開いてください。
まずはコンポーネントを追加します。
左上の方にあるAdd Componentから
Paper Spriteを追加してください。
(Spriteと入力して出てくる下の方です)
追加したPaper Spriteを選択し、
パラメータを変更していきます。
Source Spriteに先ほどインポートしたテクスチャを入れます。
少しテクスチャが大きいので、Scaleを0.1にします。
RotationのZ軸を90にします。
弾痕自体にはCollisionも不要なので
Block AllからNo Collisionに変更しておきます。
これで必要なものは揃いました。
処理を書く
まずは角度が取れているかを確認します。
FPSテンプレートに入っている
First Person Projectileを開いてください。
弾の衝突座標から衝突面に垂直な
長さ90のLine Traceを出します。
※確認用の処理です。弾痕を描画するだけなら、この処理は必要ありません。
このように衝突した平面から垂直なLine Traceが
確認できると思います。
次に描画するための処理を書いていきます。
先ほどのLine Traceの処理は削除しています。
Hit Locationから単に弾痕のブループリントを生成するだけでは、
オブジェクトにテクスチャが埋まってしまいます。
そこで、Hit Locationからカメラの向きベクトルを引くことで
少しだけ手前に生成しています。
RotationはLine Traceの処理で実装したVectorの処理を
Rotationで扱っているだけです。
これで一応描画はできるのですが、
弾痕がいつまでも残ってしまうので、
最後にBP_BreakEffectに処理を追加します。
これだけです。
生成されて5秒後に消える処理です。
以上で処理は終了です。
確認してみる
どの角度でも衝突相手の平面に張り付いて見えると思います。
※Spriteを少しいじったので
上記の画像より暗く見えるのはそのためです。
余談
銃を連射しているのは前回のブログと
同じプロジェクトを使用しているからです。
参考までにどうぞ。