Quantcast
Channel: ぼっちプログラマのメモ
Viewing all 159 articles
Browse latest View live

UE4でHTC Vive Trackerを動かしてみた

$
0
0

はじめに

HTC Vive Trackerが発売されました!
(なにそれ?という方は↓の記事がとても参考になります)
teruaki-tsubokura.com


ということで、早速UE4上で動かしてみました。( UE4.15.1 )

MotionControllerコンポーネントを試してみる

まずは、ViveコントローラやOculusTocuhを動かす際に使うMotionControllerコンポーネントを試してみました!
…動かない!

どうやらまだViveTrackerには対応していないようです(;_;)

現状の方法

GetTrackedDevicePositionAndOrientationを使うことで、ViveTrackerのトラッキング情報を取得可能です。指定するDeviceIdは動作環境によって変わってくると思います。
f:id:pafuhana1213:20170331015440p:plain

VirtualRealityテンプレートを使用する場合、↑のノード・コンポーネント階層構造のActorを作成し、MotionControllerPawnのBeginPlayでそのActorをSpawnすることで動作します。BP_MotionControllerをSpawnしている箇所の実装が参考になります。

おまけ:VR空間で酒を飲んでみた


f:id:pafuhana1213:20170331015944j:plain

深夜のテンションこわい


UE4でWebカメラの画像を取得する方法について

$
0
0

はじめに

f:id:pafuhana1213:20170422234654j:plain
皆さん、カメラは好きですか!?僕は好きです!
ということで、UE4でWebカメラの画像を取得する方法について調べました(雑導入)

Webカメラの画像を取得できると、昨今話題になっているAR, MR的なことがUE4上で可能になります。先日紹介したViveTrackerと併用すれば、こんな感じのことも簡単に?できるはず…?
www.youtube.com


Webカメラの画像を取得するには

2017/4/22現在で取れる手は以下の4つです。

OpenCVプラグインを使う

OpenCVプラグインに関しては以前の記事でご紹介しました。ただ対応しているバージョンが4.9とかなり古いため、今となってはあまりオススメできません…。
pafuhana1213.hatenablog.com

公式対応を待つ

公式対応は…今のところ4.17を予定しているようです。もうしばらくお待ち下さい…
Investigate Media Framework plug-ins for webcam support
https://issues.unrealengine.com/issue/UE-35406

がんばってコードかく

がんばって!

WebCameraプラグインを使う

お待たせしました、今回紹介するのはこのプラグインです!
forums.unrealengine.com
このプラグインWebカメラからの画像取得に特化したプラグインです。4.12と少し古いバージョンが対象になっていますが、数行修正するだけで現時点で最新である4.15で問題なく動作します!また、プロジェクトの組み込みは比較的簡単なので、とてもオススメのプラグインです。

以降では、このプラグインの導入・使用方法について紹介します。C++コードを編集・ビルドする関係でVisualStudioのインストールはしておいて下さい。

WebCameraプラグインの導入方法

まずは以下のページからプラグインを含むファイル一式をダウンロードします。
github.com

ダウンロードしたファイルの中に.uprojectがあるので、右クリックメニューの「Generate Visual Studio project files」からslnファイルを出力しダブルクリックで開いて下さい。そして、各コードに対して以下の対応を行います。

WebcameraPlugin.uproject

...
"Name": "BlankPlugin",
"Enabled": true
...

...
"Name": "Webcamera",
"Enabled": true
...

に変更(WebCameraがデフォルトで有効になるように)

WebcameraPluginCharacter.cpp

AWebcameraPluginCharacter::AWebcameraPluginCharacter()
...
//FirstPersonCameraComponent->AttachParent = GetCapsuleComponent();
FirstPersonCameraComponent->SetupAttachment(GetCapsuleComponent());
...
//Mesh1P->AttachParent = FirstPersonCameraComponent;
Mesh1P->SetupAttachment(FirstPersonCameraComponent);
...
//FP_Gun->AttachTo(Mesh1P, TEXT("GripPoint"), EAttachLocation::SnapToTargetIncludingScale, true);
FP_Gun->SetupAttachment(Mesh1P, TEXT("GripPoint"));
...

AttachToでビルドエラーになるので、SetupAttachmentに変更

WebcameraPluginProjectile.cpp

AWebcameraPluginProjectile::AWebcameraPluginProjectile()
...
// CollisionComp->OnComponentHit.AddDynamic(this, &AWebcameraPluginProjectile::OnHit);
...

この部分でビルドエラーになるのでコメントアウト
プラグインのエラーではなく、サンプルプロジェクト側のエラーなので仮対応)


以上で対応完了です。ビルドしてプロジェクトを起動します。

WebCameraプラグインの使用方法

主な処理はプラグイン側で行っているので、プロジェクト側では特に複雑な対応は必要ありません。プラグイン付属のプロジェクトの場合、以下の対応だけで完了です。
f:id:pafuhana1213:20170422233550p:plain
(FirstPersonCharacter)

Webカメラの画像を取得するだけなのにCharacter継承のBPを使うというのも…」という方は、C++のActor継承のクラスを新規作成し、以下のコードを追加して下さい。

h側

public:
UPROPERTY(VisibleAnywhere, BlueprintReadOnly, Category = "Webcamera")
class UTexture2D* WebcameraTexture;

virtualvoid BeginPlay();
virtualvoid BeginDestroy();

cpp側

コンストラクタに
ANewActor::ANewActor()
{
        WebcameraTexture = NULL;
}

void ANewActor::BeginPlay()
{
	Super::BeginPlay();
        // Webカメラからの画像取得。Connet関数の引数はデバイスID
	WebcameraTexture = IWebcamera::Get().Connect(0);
}

void ANewActor::BeginDestroy()
{
	Super::BeginDestroy();

	IWebcamera::Get().Disconnect(0);
}

※ ANewActor部分は新規作成したクラス名に置き換えて下さい。

これで動作するはずです。接続するデバイスIDを変えたい場合はコードを直で修正するか、渡す引数部分をプロパティにして調整できるようにして下さい。IWebcameraにはデバイス数の取得関数などが用意されているので、必要に応じてコードに追加すると便利です。

おわりに

これでUE4でWebカメラの画像を取得できるようになりました。取得した画像に何か効果をかけたい場合はマテリアル側で行うことになります。もしマテリアルでは難しい処理を行いたい場合は…OpenCVプラグインの利用を検討してみても良いかもしれません…

気力があれば、次はViveトラッカと連携してMRっぽいことをしてみます

UMG(Widget)をテクスチャ(RenderTarget)に描画する方法について (サンプル配布)

$
0
0

*はじめに
UMGの描画内容をテクスチャに焼き込みたいケースはしばしばあります。3Dモデルの表面に反映させたり、以前説明したStereoLayerに使用したり…その他色々!

f:id:pafuhana1213:20170521162948p:plain


SceneCapture2Dを使うことで簡単に実現はできるのですが、処理負荷の問題やレベルのどこかに配置する必要があったりと面倒です。ということで、今回はUMGの内容を直接テクスチャに描画する方法を紹介します。

説明とかいいから使いたいんだけど!?という方は、↓のサンプルプロジェクトをどうぞ。プラグイン化してます。4.15で作りました。
github.com

実装方法

WidgetRendererを使って、Widgetの内容をWindowではなくTextureに描画します。
FWidgetRenderer | Unreal Engine API Reference (うーん、あまり説明載ってない…)

WidgetRendererはBP側には公開されていないため、C++で機能実装しBPノード化する必要があります。サンプルプロジェクトのプラグインを見たほうが早い気もしますが、念のためブログにもC++コードを載せときます。

C++コード

h

 #include "UMG.h" #include "SlateBasics.h" #include "SlateCore.h" #include "SWidget.h" #include "WidgetRenderer.h"
  
 ...
 
 UFUNCTION(Category = "UMG", BlueprintCallable)
 staticvoid DrawWidgetToTarget(UTextureRenderTarget2D * Target, UUserWidget * WidgetToRender, FVector2D DrawSize, bool UseGamma, TextureFilter Filter, float DeltaTime );

cpp

void UXXXLibrary::DrawWidgetToTarget(UTextureRenderTarget2D * Target, UUserWidget * WidgetToRender, FVector2D DrawSize, bool UseGamma, TextureFilter Filter, float DeltaTime)
{
	if (!WidgetToRender)
	{
		return;
	}
	if (DrawSize == FVector2D(0, 0))
	{
		return;
	}
	if (!Target)
	{
		return;
	}

	FWidgetRenderer * r = new FWidgetRenderer(UseGamma);
	TSharedRef<SWidget> ref = WidgetToRender->TakeWidget();
	r->DrawWidget(Target, ref, DrawSize, DeltaTime);

	delete r;
}

その他

Build.csのPublicDependencyModuleNames.AddRangeに "UMG""Slate", "SlateCore"を追加

最後に

これで以下のようにノードを組むことで、
f:id:pafuhana1213:20170521171024p:plain
UMGの内容をテクスチャに描画できます。
f:id:pafuhana1213:20170521170917p:plain

毎フレームテクスチャに描画すると処理負荷が気になってくるので、UMG側で変更が発生した時だけ書き込む仕組みにすることをおすすめします。あとは、今回のコードは最低限度レベルのものなので、是非色々と拡張してみて下さい!

おわり!

World to Meters設定を変更した際にMotion Controller Componentによるトラッキングがおかしくなる問題について

$
0
0

ワールド設定にあるWorld to Metersはとても便利な機能で、この値を弄ることでVR実行時におけるレベルのスケール感を簡単に調整することができます。(自分を巨人、または小人にするイメージ)
f:id:pafuhana1213:20170521174117j:plain

しかし、Oculus TouchやViveコンを使用する場合はWorld to Metersの扱いには注意する必要があります。具体的には、Motion Controller Componentを使ったトラッキングが正常にVR空間に反映されなくなります

例えば、手を思いっきり動かしているのにVR空間上の手が全く動かなかったり、逆に動きすぎだり…。おまけで、VR空間上の手の大きさも合わなくなります。
f:id:pafuhana1213:20170521174454p:plain


この問題の解決策は実は簡単で、以下のようにWorld to Metersの値に応じてMotion Controller Componentのスケール値を変更するだけです。
f:id:pafuhana1213:20170521174657p:plain

注意:Motion Controller Componentに手などのMeshをAttachしていない場合は、そのMeshのスケール値も変更しましょう


あまり知られていない(自分も最近まで知らなかった)ノウハウなので記事にしてみました。おわり




f:id:pafuhana1213:20140602095044j:plain
なんとなくノリで1日に2回も記事書いちゃったぜ!
(下書きで貯めとけばよかったフラグ)

Texture2D / RenderTargetを指定のフォルダに出力する方法について

$
0
0

f:id:pafuhana1213:20170708005617j:plain
とあるハッカソンで画像出力を実装したかったので調査のついでに記事を書いたり

はじめに

UE4.13でExportTexture2D / ExportRenderTargetノードが追加されました。
f:id:pafuhana1213:20170708002627p:plain

この機能を使うことで、ゲーム中にSceneCapture2Dでキャプチャした結果を出力できたりします。スクリーンショット機能自体は既に標準で用意されていますが、画面上の絵とは別の絵(例えばゲーム中のキャラクタが取った写真)を出力したい場合はこの機能が有用です。(ちなみに標準のスクリーンショット機能については以下の記事で解説してます)
pafuhana1213.hatenablog.com


出力自体はかんたんなのですが、問題はノードの引数にあるFile Pathです。

※ 2017/07/08/1:30 追記
ExportRenderTargetで出力されるファイルは.hdr形式です
。その為、標準のビューワーではおそらく開けません。UE4上のコードで一般的な画像に変換できないか、分かり次第追加します

FilePathの指定内容による出力先の変化

FilePathに何も指定しない場合

f:id:pafuhana1213:20170708013516p:plain

[使用しているエンジンのインストール先]\Engine\Binaries\Win64\test.hdr

FilePathにパスを指定した場合

f:id:pafuhana1213:20170708013547p:plain

D:\TEST\test.hdr
(指定したパスにフォルダが無い場合はフォルダが自動生成される)


これはこれで便利なのですが…大抵の方は、そのプロジェクトやパッケージ内の指定フォルダに出力させたいかと思います。

プロジェクト / パッケージの特定のフォルダに出力するには

FPathsクラスで用意されている関数を使うことで、そのフォルダのパスを取得することができます。
FPaths | Unreal Engine API Reference
Packaged Game Paths, Obtain Directories Based on Executable Location - Epic Wiki

残念ながらBPからこれらの関数を使うことが出来ないため、C++コードを書く必要があります。例えばこんな感じ。

h

#pragma once#include "CoreMinimal.h"#include "Kismet/BlueprintFunctionLibrary.h"#include "OkazuBlueprintFunctionLibrary.generated.h"

UCLASS()
class GIRLFRIENDX_API UOkazuBlueprintFunctionLibrary : public UBlueprintFunctionLibrary
{
	GENERATED_BODY()

	UFUNCTION(BlueprintCallable)
	static FString 	GetGameSavedDir();
};

cpp

#include "OkazuBlueprintFunctionLibrary.h"#include "Misc/Paths.h"

FString UOkazuBlueprintFunctionLibrary::GetGameSavedDir()
{
	return FPaths::GameSavedDir();
}

この例だと、プロジェクトのSaveフォルダにRenderTargetが出力されます。
f:id:pafuhana1213:20170708013645p:plain

最後に

最近は独自のスクリーンショット機能がついたゲームがとても多いです。是非この出力機能を使ってそういったシステムを実装してみて下さい!


おわり

UE4.17で追加された、VRのSpectator Screen機能について

$
0
0

はじめに

現在Preview版が配信されているUE4.17からSpectator Screen機能が追加されます。
この機能を使うことで、VRHMD上の映像とは異なる映像をPCモニタに出力することができます。対応しているVRHMDは、OculusRift, HTCVive, PlayStationVRです。
f:id:pafuhana1213:20170718001312j:plain
(PSVRのソーシャルスクリーンとほぼ同じ内容ですね!中身はともかく)

ただし、まだ最低限度レベルでのサポート・機能しかありません。その為、VRプレイヤーと非VRプレイヤーの操作分けなどは独自に組む必要があります。この辺りは今後サポートが追加されていく予定です。


ではでは、UE4.17では何ができるのかを紹介していきます。

Set Spectator Screen Mode

f:id:pafuhana1213:20170718001641p:plain

PCモニタ上に何を表示するのかを選択することができます。各項目の結果は以下の通り。

Disabled

f:id:pafuhana1213:20170718002027p:plain

SingleEyeLetterBoxed

f:id:pafuhana1213:20170718003406p:plain

Undisorted

f:id:pafuhana1213:20170718002312p:plain

Disorted

f:id:pafuhana1213:20170718002337p:plain

SingleEye

f:id:pafuhana1213:20170718002426p:plain

SingleEyeCroppedToFill

f:id:pafuhana1213:20170718002452p:plain

Texture

f:id:pafuhana1213:20170718002556p:plain

TexturePlusEye

f:id:pafuhana1213:20170718003043p:plain

Set Spectator Screen Texture

f:id:pafuhana1213:20170718003522p:plain

Spectator Screen ModeをTextureに設定した際にPCモニタ上に表示するテクスチャを指定します。
例えば別視点における映像をPCモニタ上に出したい場合は、SceneCapture2Dをレベルに配置し、そこで使用しているRenderTargetをSpectator Screen Textureにすることで実現できます。

Set Spectator Screen Mode Plus Eye Layout

f:id:pafuhana1213:20170718004120p:plain

このノードを使うことで、VRHMD画面と指定テクスチャを同時に表示することができます。例えば、RoboRecallのようにスコアを画面に出したい場合はこの機能が有用です。
f:id:pafuhana1213:20170718004259j:plain

…ただPreview1の段階では上手く機能していない模様。正式版がリリースされたら再度確認します…

最後に

この機能を使うことで、PlayStationVRのPlayRoomVRのような非対称なVRゲームを作ることができます!また、第3者やPV撮影用にカメラ移動に補正をかけたものをモニタに映すという使い方もあります!その他にも用途は多数あるので、是非使ってみて下さい!


…VRHMD(2) + 1 = 3枚分画面を描画することになるので…
処理負荷にはご注意を…(´・ω:;.:...

自分用UE4メモ:外部のプロファイラを使う際に使用するコマンド

$
0
0

定期的に忘れるのでメモ。これでGPU系のマーカ系が入る。

  • Stat NamedEvents
    • (Enables named events for external profilers)
  • ToggleDrawEvents
    • (Toggles annotations for shader debugging with Pix, Razor or similar GPU capture tools)

RenderDocや↑に書いてある謎のツールを使う際に是非活用しましょう

以上

UE4のARCoreサンプルを未サポート端末(ZenFoneAR)で動かすためにしたこと(2017/9/4)

$
0
0

f:id:pafuhana1213:20170904230939j:plain

はじめに

ARCoreというTango目的でZenFoneARを自腹で買った僕が涙目になる技術が公開され、
更に既にUE4が試験的に対応済み!ということで、早速動かしてみました!

注) まだ開発者プレビュー段階なので変わる可能性ありますし、動作の保証はありません。色々了承した上で自己責任で!

注) UE4+Android開発をする準備が既に整った方を対象として説明してます。まだの方はこちらを参考にセットアップ!
docs.unrealengine.com



参考:
https://www.unrealengine.com/ja/blog/get-started-with-google-arcore-using-unreal-engine-today

Getting Started with Unreal  |  ARCore  |  Google Developers

ARCore Service appを導入

まずはAndroid端末上でARCoreを動かすために、以下のサイトからARCore Service appをダウンロードし、対象の端末にインストールします。
Downloads and Samples  |  ARCore  |  Google Developers

インストール用のコマンド
adb install -r -d arcore-preview.apk

注意!
ZenFoneARなどのTango機能を持つAndroid端末にARCore Serviceをインストールすると、以降Tangoアプリ起動時にクラッシュするようになります。クラッシュを回避するためには、Tango Coreを再インストールするしかありません。現時点ではARCoreとTangoは両立できないのでご注意ください

ARCore用のUE4をダウンロード&ビルド

ARCore用のUE4プラグインはまだ本流に組み込まれていないため、開発中のブランチからUE4をダウンロードし、ビルドする必要があります。
https://github.com/google-ar-unreal/UnrealEngine/tree/4.17-arcore-sdk-preview

ソースからのビルド手順は以下のページで解説されています。
docs.unrealengine.com

ARCore用のサンプルをDL&起動

次に、ARCore用に用意されたサンプル「HelloARSample」を以下のサイトからDLします。
Downloads and Samples  |  ARCore  |  Google Developers
f:id:pafuhana1213:20170904233107p:plain

そして、先程ビルドしたUE4でサンプルを開きます。そして、そのままパッケージング作業を行い、対象となる端末にインストールします。
docs.unrealengine.com

すると、「Hello AR UE4」というアプリがインストールされていますので、実行して動作確認します!おつかれさまでした!

・・・


はい

※ 2017/9/4時点ではARCoreはまだPixel, Pixel XL, GalaxyS8にしか正式対応していません!

未サポート端末であるZenFoneARを動かすためにしたこと

ヒントになった記事がこれです
qiita.com

どうやらサポート端末か否かの判定さえ誤魔化せば何とかなりそうです。ということで、ARCore用プラグインのコードの一部を修正(といっても、Trueを強制リターンするようにしただけ)

GoogleARCoreAndroidHelper.cpp

bool FGoogleARCoreAndroidHelper::IsTangoCorePresent()
{
#if PLATFORM_ANDROIDreturntrue; // addif (JNIEnv* Env = FAndroidApplication::GetJavaEnv())
...
bool FGoogleARCoreAndroidHelper::IsTangoCoreUpToDate()
{
#if PLATFORM_ANDROIDreturntrue; // addif (JNIEnv* Env = FAndroidApplication::GetJavaEnv())

...

これでまだサポートされていないZenFoneARでARCoreを動かすことができました!めでたしめでたし!

注) この方法での起動はZenFoneAR以外の端末ではノーチェックです。また今後の動作に支障が出る可能性があります。試す場合は自己責任でお願いします。


f:id:pafuhana1213:20170904234606j:plain
注)
自 己 責 任 ! ! !


「UE4.18で生まれ変わった物理アセットエディタ(Physics Asset Editor)について」 と 「物理と少し仲良くなる方法について」 その1

$
0
0

qiita.com
本記事はUnreal Engine 4 (UE4) Advent Calendar 2017の13日目の記事です。

長くなっちゃったので、3つ記事分割しました!
その1:ここ
その2:http://pafuhana1213.hatenablog.com/entry/2017/12/13/000100
その3:http://pafuhana1213.hatenablog.com/entry/2017/12/13/003018

はじめに

UE4.18で物理アセットエディタが大きく改善されました!!!

びふぉ~
f:id:pafuhana1213:20171212192315j:plain
あふた~
f:id:pafuhana1213:20171212192324j:plain

UE4.18リリースノートより
f:id:pafuhana1213:20171212192602p:plain

ということでかなり良くなりましたが、まだまだ情報が少ないので色々まとめてみました!

※ 今回使用したモデル
らりほま式 Gray ちゃん:
http://rarihoma.xvs.jp/products/graychan

※ 参考
● 物理アセットに関する公式ドキュメント(2017/12/12現在)
Physics Asset Editor Interface
https://docs.unrealengine.com/latest/INT/Engine/Physics/PhAT/PhysicsAssetEditor/index.html
Physics Asset Editor - Constraints Graph
https://docs.unrealengine.com/latest/INT/Engine/Physics/PhAT/Graph/index.html
Physics Asset Editor - Tools and Profiles
https://docs.unrealengine.com/latest/INT/Engine/Physics/PhAT/ToolsAndProfiles/index.html
Physics Asset Editor - Skeleton Tree
https://docs.unrealengine.com/latest/INT/Engine/Physics/PhAT/SkeletonTree/index.html
Physics Constraint Reference
https://docs.unrealengine.com/latest/INT/Engine/Physics/Constraints/ConstraintsReference/index.html
Using Profiles for Bodies and Constraints
https://docs.unrealengine.com/latest/INT/Engine/Physics/PhAT/HowTo/UsingProfiles/index.html

古いページの差し替え・翻訳は随時行ってます!

● ライブストリーム
www.youtube.com

物理アセットについて

物理アセットはSkeletalMeshにおいてとても重要な要素の1つです。例えば、以下のような場面で使われます。

(こうして並べてみると結構多い…)

そして、物理アセットは以下の要素で構成されています。

  • Bone
  • Body
  • Constraint
  • Primitive

BoneはSkeletalMeshが持つボーンのことです。そして、他の2つに関しては以下の図が分かりやすいと思います。
f:id:pafuhana1213:20171212195523j:plain
(引用: ニコニコ立体さんの髪とスカートを揺らすまで その2 - Qiita

この図におけるAnchorがConstraint です。 Bone毎にBodyを作成し、Constraintで2つのBodyを接続します。そして、Bodyが持つ複数のPrimitive( カプセルやボックスなど )がCollisionとなり、物理挙動などの各処理を行う形になっています。 そして、これらの形状・パラメータによって挙動が大きく変化します。その為、各要素がどう動きに影響するかを把握しておかないと、挙動の調整が大変なことになってしまいます!

f:id:pafuhana1213:20171212200246p:plain
(ひ…ひぇ…(・・;))

ということで、以降は物理アセットエディタでよく使う機能や挙動の調整をする上で重要になるパラメータについて紹介していきます。

4.18版の物理アセットエディタの基本操作について

f:id:pafuhana1213:20171212200729p:plain

まずは、以前のバージョンから大きく変わった所から紹介していきます。

Skeleton Tree

f:id:pafuhana1213:20171212201002p:plain
以前は「Body表示とConstraint表示を切り替える必要がある」「文字列だけで分かりづらい」などなど色々使いにくかったツリー表示が改善されています!

  • Bone, Body, Constraint, Primitiveの階層を同じViewで見れるように
  • 各項目における右クリックメニューが強化されて便利に
  • アイコンで種類が可視化されるように(物理ONOFF状態も見れるの嬉しい!)
  • 上部の入力欄から各項目を名前で検索可能に
  • 表示する項目のフィルタリングが可能に

特に、一番下のフィルタリング機能が最高に便利です!
f:id:pafuhana1213:20171212203105g:plain

Bodyだけを集中して編集したいなぁ、今はPrimitiveの情報いらないなぁとか、状況に応じて表示をカスタマイズできるのは凄くいいです!編集に関係ない項目を表示しないことで、ヒューマンエラーによる事故も防げます!超便利!

Graph

f:id:pafuhana1213:20171212204145p:plain
4.18版から追加されたノードベースのビューワーです。Skeleton Treeが複雑化していると、どのBodyが他のどのBodyと接続しているのか?などの情報が見えづらくなります。そんな時に役立つのがこの画面です。
ノードというUE4ユーザには親しみのある形式な上、各ノードには「Bodyを持つBoneの名前」や「Constraintが接続しているBodyの名前」が含まれるため、今までは難しかった情報の把握が簡単になりました!

さらに、これは単なるビューワーではありません!
f:id:pafuhana1213:20171212204816g:plain
このようにD&Dすることで、新しいConstraintを作ることが可能です!
f:id:pafuhana1213:20171212205345p:plain
右クリックメニューもSkeleton Treeと同じ物が出るので、編集も自由自在です!

ただ全体を俯瞰しての編集はやはり難しいので、目的に応じてSkeleton TreeとGraphを使い分けるのが良いかと思います。

Viewport と Preview Scene Settings

f:id:pafuhana1213:20171212205727p:plain
4.18ではPhysicsアセットの編集もAnimationやAnimationBPと同じエディタ上で行えるようになりました。その恩恵を強く受けているのがこの部分です。

まずShowに関しては以前に比べるとかなり項目が増えました! 特にBodyの表示をカスタマイズできるのは便利です!
Bodyは他の項目に比べて描画面積が大きい上に互いに重なりあっているため、見辛いことが多いです。是非このShowの項目を使って見やすい形に調整しましょう!
f:id:pafuhana1213:20171212212701g:plain

他にも、
f:id:pafuhana1213:20171212212838p:plain
プレビュー時の物理に関するパラメータを調整できたり、
f:id:pafuhana1213:20171212212917p:plain
以前に比べて簡単にプレビューで使用するアニメーションアセットを指定できたり、
f:id:pafuhana1213:20171212213054p:plain
録画ボタンを使うことで、物理挙動がベイクされたアニメーションを作成できたり…







f:id:pafuhana1213:20171212213426j:plain
(ふふふ…超便利なったじゃないか…!)

長くなったので、新しい物理アセットエディタの各機能の紹介はここまで。
その2では、実際にどうやってBodyやConstraintを追加・調整するのかについて説明します。

「UE4.18で生まれ変わった物理アセットエディタ(Physics Asset Editor)について」 と 「物理と少し仲良くなる方法について」 その2

$
0
0

qiita.com
本記事はUnreal Engine 4 (UE4) Advent Calendar 2017の13日目の記事です。

長くなっちゃったので、3つ記事分割しました!
その1:http://pafuhana1213.hatenablog.com/entry/2017/12/13/000000
その2:ここ
その3:http://pafuhana1213.hatenablog.com/entry/2017/12/13/003018


この記事ではグレイちゃんのツインテールに物理をつける作業を通して、どういう流れで物理アセットを作っていくかについて説明します。

作業に取りかかる前に

早速色々パラメータ調整をしていきたい所ですが、まず少し落ち着きましょう!
f:id:pafuhana1213:20171212214803p:plain

物理アセットの初期状態は↑のようにBodyがびっしりと配置されています。これはこれで便利な時もあるのですが、今回のように特定の部位だけに物理を適用したい場合は作業の邪魔になります。さらに、不要なBodyは処理負荷の観点からもオススメできません…

なので、不要なBodyは消すか、全Bodyを消して必要なBodyを新たに作成しましょう!今回はBodyの追加方法を説明したいので後者の手順でいきます。全消しは簡単で、Skeleton Treeの項目を全選択してdeleteするだけです。

Bodyの追加

今回はツインテを揺らしたいので、頭とツインテにBodyを付けます。
f:id:pafuhana1213:20171212220408g:plain

この右クリックメニューから追加できるBodyですが、エディタ右下にあるToolsのBody Creationの部分で形状・条件を設定する事が可能です。
f:id:pafuhana1213:20171212220702p:plain

Bodyの物理ONOFF

次に、どのBodyを物理で揺らすのかを設定します。Bodyは全て物理で揺れるものという訳ではなく、物理では動かないコリジョンのためのBodyも用意する必要があります。
f:id:pafuhana1213:20171212221202p:plain
f:id:pafuhana1213:20171212221223p:plain
ON・OFFの設定は詳細パネル 又は 右クリックメニューの Physics Typeで設定します。

  • Default : 親(Skeletal Mesh Component)のSimulate Phyiscs設定に従う
  • Kinematic:物理OFF
  • Simulated:物理ON

今回は頭はKinematic、ツインテはSimulatedに設定します。

ちなみに、Kinematic設定になっているBodyはアイコンが変わります。
f:id:pafuhana1213:20171212221513p:plain
超分かりやすい!!!

ここまでの結果がこんな感じです
f:id:pafuhana1213:20171212221824g:plain

暴れん坊将軍なので、次はConstraintの設定をしていきます。

Constraintによる回転制限

Constraintを使うことで、物理によるBodyの回転を制限する事が可能です。デフォルトでは以下のようにXYZ軸全てにおいて制限無しになっています。そりゃ荒ぶる…
f:id:pafuhana1213:20171212222718p:plain

ちなみにConstraintの回転制限の表示に関しては、Showのここから切り替え可能です。
f:id:pafuhana1213:20171212222238p:plain

今回は前後に揺れるような髪の動きにしたいので、前後の1軸でのみ動作するように制限を掛けます。回転の制限はConstraintの詳細パネルにある「Angular Limits」から設定可能です。
f:id:pafuhana1213:20171212222830p:plain

完全に制限する場合は Locked、一定の角度に制限する場合はLimitedに設定します。

さらに、その下にあるSoft ConstraintをOFFにします。この設定はバネのような表現をするためにConstraintを緩和するものなのですが…「個人的な印象ですが」有効だと荒ぶることが多いです。なので、今回はOFFにしておきます。
f:id:pafuhana1213:20171212225852p:plain

で、設定した結果がこれ
f:id:pafuhana1213:20171212223558g:plain

一気にいい感じになりましたが、ツインテの根本部分がプルプル震え続けています。次はこれを抑えます。

Primitive同士の重なり・衝突を削減

f:id:pafuhana1213:20171212223914p:plain
上の画像はツインテの根本の部分で、複数のBodyが持つPrimitiveが重なり合っているのが確認できます。これは非常に悪い状態で、物理が始まるとお互いを弾き合います。すると、物理開始直後に荒ぶったり常にプルプルするという好ましくない挙動になりがちです。また、Primitive同士の衝突頻度が高い状態もあまり好ましくありません。

その為、各Primitiveの大きさを調整する必要があります。調整の手法は2パターンあって、まずはPrimitiveをいつものGizmoを使って調整する手法があります。
f:id:pafuhana1213:20171212224433p:plain

次に、Bodyの詳細パネルから直接数値を入力して調整する手法です。
f:id:pafuhana1213:20171212224703p:plain

少し余談なのですが、↑の画像にある Consider for Boundsには是非注意して下さい。この設定が有効になっている場合、そのBodyが持つPrimitiveは Skeletal Meshのバウンディングボックスの計算に使われます。デフォルトは有効になる為、Skeletal Meshがアニメーションによってシルエットが変化しても、その形状に応じたバウンディングボックスが作成されます。しかし、もし何らかの物理挙動を実現するために超特大のPrimitiveを作成した際に問題になります。Skeletal Meshの見た目よりも遥かに大きなバウンディングボックスが作成されるため、カリング計算など様々な面で支障が生じる可能性があります。そんな時に役立つのが、このConsider for Boundsフラグです。もしSkeletal Meshのバウンディングボックスが物理アセットが原因でおかしくなっている場合はこの設定を調整してみて下さい。

で、結果がこちら
f:id:pafuhana1213:20171212230311g:plain

このgifだと分かり辛いとは思いますが…かなり安定しました!
これで終わり!
物理アセットの調整終了!!!


f:id:pafuhana1213:20171212231018j:plain
と言いたい所ですが…フレームレートが低下したり、急激な動きが発生すると荒ぶることがあります…
次の記事はその荒ぶりを可能な限り回避するためのTipsを紹介していきます。

「UE4.18で生まれ変わった物理アセットエディタ(Physics Asset Editor)について」 と 「物理と少し仲良くなる方法について」 その3

$
0
0

qiita.com
本記事はUnreal Engine 4 (UE4) Advent Calendar 2017の13日目の記事です。

長くなっちゃったので、3つ記事分割しました!
その1:http://pafuhana1213.hatenablog.com/entry/2017/12/13/000000
その2:http://pafuhana1213.hatenablog.com/entry/2017/12/13/000100
その3:ここ

この記事では物理の荒ぶりを避けるためのTipsを紹介していきます。

今更ですが…

色々紹介する前に…先に言わないといけないことがあります…
どんな状況でも荒ぶらず意図通りに動作する物理挙動は
ほぼ不可能だということを念頭に置いて下さい

例えば低フレームレートの環境では物理は必ず荒ぶります。また、テレポート移動などで物理で動く部分が壁などにめり込んだ場合は荒ぶる可能性が非常に高いです。このように状況によっては荒ぶる可能性があることを考慮して下さい。逆に言うと、荒ぶりを避けるために高フレームレート(60fps)を維持するようにしたり、めり込みを引き起こすような仕様は避けるなどの対応を入れるべきです。
また、物理は同じ条件であっても挙動が変化するケースが多いです。なので、カットシーンにおける物理による髪の動きを常に同じにしたい!といったことは実現するのが非常に難しいです。
(UE4.17から入ったプロジェクト設定のPhyiscsカテゴリにあるEnhanced determinismがそれを助けるかもしれませんが…未検証です。)

もし物理挙動を完璧にコントロールしたい場合は、物理挙動をベイクしたアニメーションを使用することを検討して下さい。その際は、その1で説明したアニメーションの録画機能を使ったり、MayaなどのDCCツールで物理挙動をベイクすることになると思います。
または、手付けでサクッと作った方が早いケースや、少し負荷がありますがAnimationBPでIK処理を組んでそれっぽく見せることも候補にいれるべきなのかもしれません。

物理の安定性、処理負荷、そして調整コストなど色々と考慮すべきことがあることに注意するようにしましょう!

…以上!では、楽しいTips紹介へ

Inertia Tensor Scale

f:id:pafuhana1213:20171212233743p:plain
今回物理アセットの記事を書こうと思った理由がコイツです!

新規:RigidBody Anim Node の改善
RigidBody ノードにルートボーンのシミュレーション空間のオプションが追加されました。アタッチされたスケルタルメッシュをプレイヤーのカプセルと逆向き回転させる場合に便利です。さらに、物理アセットエディタに慣性スケーリングとコンストレイント ドミナンス (優勢) を適用することで、安定性とジッターが大幅に改善されました。

これは4.18リリースノートの一部です。この中の慣性スケーリングがBodyの詳細パネルにあるInertia Tensor Scaleにあたります。

この値を上げることで、慣性による物理挙動を制限する事が可能です。それの何が良いのかというと…フレームレートの低下や急激な動きの変化などによる物理の荒ぶり具合を抑制してくれます!

かなりの効果がありますので、どうしても物理が荒ぶる場合は一度この値を上げてみて下さい。デフォルトの1.0から1.1や1.3に上げるだけでも効果が十分あります。ただし、値を上げすぎると普段の物理挙動も抑制されるため、少し硬い動きになる可能性があることに注意して下さい。

Parent Dominates

f:id:pafuhana1213:20171212234510p:plain
先程のリリースノートの文章にあったコンストレイント ドミナンス (優勢) が、Constraintの詳細パネルにあるParent Dominatesにあたります。

これを有効にすることで、その子要素の動きによる影響を無視することができます。ですので、今回のツインテのように先端部分が物理で振り回されるような場合は、根元部分のParent Dominatesを有効にすることで挙動が安定化する可能性があります。

Projection Linear / Angular Tolerance

f:id:pafuhana1213:20171212235010p:plain
先ほどと同じくConstraintが持つこの2つのパラメータは、物理挙動の誤差を補正する処理で使われる閾値です。この値を超えると補正処理が走るようになるので、もし荒ぶりがひどい場合はこの数値を上げてみると改善される可能性があります。ただし普段の挙動にも変化がある可能性もあるのでご注意下さい。

Position / Velocity Solver Iteration Count

f:id:pafuhana1213:20171212235254p:plain
これはBodyが持つパラメータの一つです。この値を上げることで物理挙動における計算回数を増やすことができ、その結果物理挙動が安定します。しかし、計算回数が増えるためCPU負荷も増えるのでご注意下さい。

Use CCD

f:id:pafuhana1213:20171212235434p:plain
これもBodyが持つパラメータです。Use CCD(Continuous Collision Detection)を有効にすることで、Primitiveの突き抜けの発生を抑制できます。しかし、こちらも負荷が増えるためご注意下さい。

Max depenetration velocity

f:id:pafuhana1213:20171212235724p:plain
これもBodyが持つパラメータです。この値が設定されている場合、Primitive同士が重なり合った際にその設定した速度で反発するようになります。なので、この値を低めに設定しておくことで、運悪く重なり合った際の荒ぶりを抑制出来る可能性があります。

実はStatic / SkeletalMesh Componentにも同じ設定があります。
f:id:pafuhana1213:20171213000409p:plain

f:id:pafuhana1213:20171213000217g:plain
上の動画はMax depenetration velocityを設定することで、物理が有効になっているCube同士が重なり合っている状態で実行した際の挙動がどう変わるかのデモです。左がデフォルトの0、右がMax depenetration velocityを1に設定した状態です。見ての通り、Max depenetration velocityを設定することでゆっくり離れていくようになります。

ただ…物理的には正しくない挙動なので使い所は少し限定されるかもしれません。

Contact Distance

f:id:pafuhana1213:20171213000756p:plain
こちらはConstraintが持つパラメータです。正直な所あまり理解できていないのですが、この値を上げることで早く衝突判定が行われるようになり、物理挙動の安定性が向上します。しかし、お約束ですが負荷も向上するのでご注意下さい。

f:id:pafuhana1213:20171213001049p:plain
ちなみに、Contact Distanceの値はProject設定のPhysicsカテゴリから一括で補正をかけることが可能です。

Substepping

f:id:pafuhana1213:20171213001838p:plain
Project設定のPhysicsカテゴリにあるSubsteppingを有効にすることで、物理の挙動が安定します。かなり効果があるのですが、こちらもCPU負荷が向上するのでご注意下さい。
Unreal Engine | 物理サブステップ機能

小さすぎるオブジェクトは物理を有効にしない

PhysXに渡す値の関係で、小さすぎるオブジェクトに対して物理を有効にすると安定しない可能性が高いようです。もし小さいPrimitiveが含まれる場合は削除した方が良いのかもしれません

ルートから遠ざかる程、質量(mass)を減らすようにする

こうすることで大幅な動きを避けることができるため、急に動きが変化した際の挙動を抑えられる可能性があります。Massの値はBodyから変更可能です。

急激な位置・向きの変化は避ける。又またはTeleportフラグを使う

例えばSet Actor Location / Rotationを使って1フレームで急激に位置・向きを変えた場合、物理計算が破綻し挙動がおかしくなります。その為、そういった急激なTransform更新は避けましょう。または、Teleportフラグを有効にしましょう。
f:id:pafuhana1213:20171213002514p:plain

最後に

f:id:pafuhana1213:20171213002954j:plain
3記事に渡って物理アセット周りについて色々説明しました!
物理には色々困らせられることが多いかとは思いますが、上手く制御すれば見た目がかなりリッチに見えます!
UE4.18で改善された物理アセットエディタや、追加された機能はその大きな助けになってくれる筈です!
まだ触っていない方は是非触ってみて下さい!そして、その際にこの記事が少しでも参考になれば幸いです。


次は @miyahuji111さんによる「Houdini for UE4Pluginあたりで」です!
UE4 x Houdini が最近熱いと思うでスコグ楽しみです!

2017年におけるUE4に関する講演スライドをまとめながら、少し補足なり振り返りをしたりしなかったり

$
0
0

本記事はUnreal Engine 4 (UE4) Advent Calendar 2017の20日目の記事です。
qiita.com

はじめに

当初の予定では「また帰ってきたUE4マーケットプレイスで購入したアセットを片っ端からレビューするマン」をお送りする予定でしたが、「今はマーケットプレイスホリデー セールで手が離せないから無理!」と意味の分からない戯言をほざきやがるので、予定を変更してこの一年間で公開したUE4に関するスライドをまとめつつ、補足などを入れていきます。
www.unrealengine.com

f:id:pafuhana1213:20171220200029j:plain
(本当に申し訳ないです…アセットレビュー記事は今後定期的にアップしていこうかなぁと思います。ネタがないときとか)

2017年1月~3月中旬

GDC2017に行ったり、EpicのシアトルオフィやHQに行ったりしてました

2017年3月末

www.slideshare.net
動画:
【EDGE2017】UE4を使ったVRコンテンツ製作で120%役に立つTips集+GDC情報 - YouTube

GDC2017の情報を簡単に説明しつつ、UE4でVRコンテンツを作る際によく問題になる負荷とその対策について話しました。4月の京都フェスでVRについて話すことが決まっていたので、そこでは時間的に話せない内容を…という裏の狙いもあったりしました。
VR以外でも使える負荷軽減テクニックを紹介しているので、是非CEDEC2017における篠山さんのスライドと合わせて見て頂けるとうれしいです!

www.slideshare.net

2017年4月

www.slideshare.net
動画:Robo Recall で使われている最新の VR 開発テクニックをご紹介! 岡田 和也 Epic Games Japan - YouTube

アンリアルフェスデビューした時のスライドです。せっかくだし全世界初出しの情報を届けたい!ということもあり、シアトル出張中に超絶拙い英語でRoboRecallに関わったスタッフに色々聞いた思い出が蘇ります…(´;ω;`)ウッ…
あと、ずっと話したかったレギュレーション策定話をできたのも良かったなぁと。大事ですよ…大事…いや、本当に…。

VRの負荷話となるとGPU負荷の話題が挙がりがちですが、昨今のグラボの性能向上具合を見ると、このスライドのようにCPU負荷軽減話をもっとしないとなぁと思ったりします。もっと頑張らねば…!

2017年5月

珍しく講演のない平和な月…あ、カレンダー見たら全然平和じゃなかったわ

2017年6月

www.slideshare.net

GTMF( Game Tools & Middleware Forum )でノンゲームについて話すという、今考えると「マジ頭おかしいな、こいつ」という講演です。ただ国内におけるUE4の活用事例をご紹介できたのは良かったなぁと思ったりします。
スライド内で紹介しているProject LayereDですが、レイヤードストーリーズ ゼロと名前を変えて、Youtubeとモバイルゲーム内にてUE4で作られたアニメが配信されています!今後も更新されるとのことなので要チェックです!
projectlayered.com
www.youtube.com

2017年7月

www.slideshare.net

8月の頭にUE4.17の正式版リリースされるので、少し早くリリースノートの内容を紹介しちゃおう!という内容です。(HQのようにリリース直前・直後ぐらいのタイミングで最新版の紹介ができたらいいね、とロブさんと話してたり…)
スライド最後の方で紹介しているAsset Managerはロードの改善やモバイルコンテンツにおけるコンテンツアップデートで大活躍する機能なので、是非試してみて下さい!
anapurna.co.jp

あ、スライドでTango対応の紹介もしてるなぁ…

jp.techcrunch.com

(´;ω;`)ウッ…

2017年8月

www.slideshare.net
動画:【CEDEC2017】最新モバイルゲームの実例から見るUE4のモバイル向け機能・開発Tipsを全部まるっとご紹介! - YouTube

HITやリネージュ2レボリューションが国内でリリースされたり、UE4でモバイル開発する上で皆気になる情報を伝えないと!とかなり気合入れて作った記憶があります。初CEDEC登壇でしたし!後ほど紹介するCEDEC九州でのスライドはこのスライドから一部削除・追加したものになります。

ここで謝罪しないといけないことがあります…。
このスライドで紹介しているコンテンツアップデートの仕組みは…古い情報になってます!最新情報は後ほど紹介するコンテンツアップデートに関するスライドをご確認下さい…

2017年9月

www.slideshare.net
超久々の猫でも分かるUE4シリーズです。
UE4のUMGに関する情報少ない!!! とずっと思ってたので話しました。UIはゲームのクオリティに大きく関わる部分なので少しでも良くしたい所ですね…!

このスライドで紹介していない内容として、SMeshWidgetというものがあります。UMGで大量にオブジェクトを表示したいという方は一度この機能を試してみるとよいかもしれません!(早く検証しないと…)
forums.unrealengine.com

2017年10月

www.slideshare.net

CEDEC2017におけるスライドをベースにしつつ、4.18で入ったモバイルに関する新機能、特にiOS開発におけるリモートビルドについて書きました!(p116から)
4.17以前ではリモートビルドしようとすると色々落とし穴があったのですが、4.18の対応で大分マシになりました…。あとはApple Developer Programに入らずにパッケージを作れるようになればいいのですが…

2017年11月

www.slideshare.net
Google様が主催しているインディーゲームコンテストの一環として登壇した際の資料です。
events.withgoogle.com

後半ではインディー開発者向けにUE4を学習する際に役立つ資料へのリンク集などありますので是非ご活用下さい!今だとUdemyも候補になりますね!
www.unrealengine.com

スライドで公開すると言ってたSNS投稿用プラグインに関しましては…うう…遅くなって申し訳ないです…( 来月中には必ず… )

www.slideshare.net
HQがいつまで経ってもコンテンツアップデートに関する記事を作らないので、やるしかねぇ!と気合で書いたスライドです。
そろそろ足音が聞こえてきたUE4.19でこのスライドで紹介した機能が使えるので、モバイル開発している方は是非お試しください!
(Project Launcherに関しては…もっと詳細な内容を共有しないとですね…来年頑張ろう…)

2017年12月

www.slideshare.net
今月というか昨日使った講演資料です。2018年はARKit / ARCoreが絶対来るでしょ!いや、むしろ来い!来て!という思い・願い・祈りを込めて作りました。
ARに関してもUE4.19で色々機能が追加されるので本当に楽しみです!今度こそ…今度こそ長く続くARブームを作っていきましょう…!(´;ω;`)

最後に

今回の記事を書くきっかけになったのが、この @com04さんのツイート。

HAHAHA、そんなわけないでしょ!と調べてみたらこの有様だよ!!!
ちなみに、既に来年は1・2・3月登壇予定ですよ!!!!!

ということで、来年も色んな情報をガンガンシェアしていきたいと思いますので、何卒よろしくお願いいたします。
ぶ、ブログもがんばります!

gdgdな内容でしたが以上でした
明日は栗坂こなべ(@kurisaka_konabe)さんによる「艦隊レーンVRを作ってみた話」です!
色々とカオスな話の予感がして、オラワクワクしてきたぞ!

LEFT ORDERS ver.C93 サポート用ページ

UE4でWebカメラの画像を取得する方法について( UE4.18以降 )

$
0
0

f:id:pafuhana1213:20180123150509j:plain

はじめに

UE4.18にてMedia Frameworkが大幅に改良されたのですが、その中にはWebカメラ対応が含まれています。
www.unrealengine.com


f:id:pafuhana1213:20180123150051p:plain
で、試した所、ノートPCのフロントカメラとHTC Viceのフロントカメラで正常動作を確認しました。(Viveの場合はSteamVR設定にてカメラを有効にすることをお忘れなく)

ということで、以前書いた記事の訂正・補足記事をかいた次第でありますです。
pafuhana1213.hatenablog.com

実装方法

とても簡単で、Media Playerに指定のWebカメラに対応したURLに渡すだけです。
f:id:pafuhana1213:20180123144354p:plain
blueprintue.com (コピペ用)
「Media Player」変数はMedia Player型で、指定のMedia Playerアセットを指定する必要があります。

上記の処理を入れることで、指定したMedia Playerが管理するMedia TextureにWebカメラの映像が出力されます。あとは、マテリアルやUMGなどでそのテクスチャを使えば、画面上にWebカメラ映像を表示する事が可能です。PCに接続されているデバイスによっては、「Enumerate Vide Capture Devices」から取得する配列からどの項目をOpenURLに渡すのかを判定する処理を書く必要が出てくるかと思います。

Androidのカメラ映像を取得したい場合


UE4.18から入った、Android Camera Playerを有効にし、プロジェクト設定のAndroid Cameraにて用途に応じた設定にすれば、Webカメラと同じ実装でAndroidカメラからの画像を使用する事が可能です。
f:id:pafuhana1213:20180123145229p:plain
f:id:pafuhana1213:20180123145422p:plain

最後に

以前に比べると簡単にカメラ画像を取得できるようになりました。ただその取得した画像に対して画像処理を掛けたい場合は少し考える必要があります。画像全体への単純な処理であればマテリアル上で処理を組むだけでいいかもしれませんが、それ以上になるとC++OpenCVの導入などを検討する必要が出てくるかと思います。未検証で申し訳ありませんが、OpenCVを導入する際は以下の記事が参考になるかもしれません。
Detailed Account Of Integrating OpenCV Into UE4 With VS2017 - Epic Wiki


ではでは~

UE4 + Android 実機デバッグのやり方 その1 (vsdebugandroidコマンド篇)

$
0
0

f:id:pafuhana1213:20180215000946j:plain

はじめに

以前はNsight Tegraを使った実機デバッグ方法が紹介されていました…
[UE4] 実機でデバックしてみよう!(Android編)|株式会社ヒストリア

…が、実は4.16から別のやり方が追加されています!

Added functionality to use the visual studio mobile projects for debugging. To generate them run "generateprojectfiles.bat -vsdebugandroid" from a command prompt. After you have packaged your game for Development and put it on the device, you can set this new project as the start up project and run/debug the project in Visual Studio.

www.unrealengine.com

今回の記事では↑の機能を使った方法を紹介します。
あ、C++プロジェクト限定な上に、ランチャー版ではなくソースコードからビルドしたUE4が必要です。

vsdebugandroidコマンドを使った実機デバッグ方法の手順

1. 対象となるC++プロジェクトをUE4.slnと同じディレクトリに配置

まずはデバッグしたいUE4C++プロジェクトをUE4.slnと同じディレクトリに配置します。こうすることで、後述のgenerateprojectfiles.batを走らせると、UE4.slnがそのC++プロジェクトを認識しSolution ExplorerC++プロジェクトが追加されます。
f:id:pafuhana1213:20180214234647p:plain

2. Debug / DebugGame / Developmentのいずれかでパッケージを端末にDeploy

次にUE4エディタ上からapkを作成し、端末にインストールします。作成する際はデバッグなのでTest, Shipping設定以外にしましょう。
docs.unrealengine.com

3. UE4.slnを開いている場合は閉じる

そのまま

4. 「generateprojectfiles.bat -vsdebugandroid」をUE4.slnがあるディレクトリ上で実行

UE4.slnにあるgenerateprojectfiles.bat を -vsdebugandroidつきで実行します。もしVisual Studio2017をお使いの場合は、-2017も追加して下さい。

※ 引数の渡し方が分からない人向け
itecbook.com

5. UE4.slnを開き、Solution Explorerの最下部にUE4Android Debug Projectsというフォルダができていることを確認

ここまでの操作が成功していると、以下の画像のような見慣れない項目がSolution Explorerに追加されています。
f:id:pafuhana1213:20180214235822j:plain

6. [対象プロジェクト名]-AndroidRun をStartUp Projectに設定

5で確認した項目の中から1で追加したプロジェクトの名前に"-Android"を加えた項目を探し、右クリックメニューからStartUp Projectに設定して下さい。例えばSampleUE4というプロジェクト名の場合は、SampleUE4-AndroidRunをStartUp Projectにすることになります。

7. デバイスをPCに接続し、adb devicesで認識できる状態にする

Android開発でのいつものアレです
qiita.com

8. UE4.sln上でF5を押して実機デバッグ開始

F5を押すと自動的に端末上でアプリが立ち上がります。以降はブレークポイントが有効になるので実機デバッグし放題です!

最後に

これで実機デバッグ可能なのですが、一部の端末ではこの方法やNsight Tegraによる実機デバッグができません。具体的には、run-asコマンドを受け付けない端末( 主にSamsung製の端末 )の場合はこれらの方法で実機デバッグができません。

が、AndroidStudioを使えばrun-asを受け付けない端末でも実機デバッグ可能です!次の記事ではその方法を紹介する予定です。

ではでは~


UE4 + Android 実機デバッグのやり方 その2 (AndroidStudio篇)

$
0
0

その1はこちら
pafuhana1213.hatenablog.com

はじめに

その1の最後に書いたとおり、一部の端末ではVisualStudio経由でのデバッグ( run-asコマンドを使用するデバッグ )ができません…。ですので、そういった端末の場合はAndroid Studioを使った実機デバッグをする必要があります。なので、今回はその方法を書きます!

あ、Android Studioのセットアップは説明すると長くなるので各自ググって下さい!
developer.android.com
akira-watson.com

1. UE4エディタからAPKを作成

まずはいつもの手順でAndroid向けにパッケージを作ります。その際に生成されるフォルダの中にAPKファイルが含まれています。
docs.unrealengine.com

2. APKをAndroidStudioにインポート

Android Studioを起動し「File/Profile or Debug APK...」を選択
f:id:pafuhana1213:20180307235414j:plain

その後、1で作成したAPKを選択しインポート完了

3. libUE4.soの設定開始

右上の「Select library to add debug symbols」をクリックし、表示されたリストにあるlibUE4.soを選択します
f:id:pafuhana1213:20180307235546j:plain

4. libUE4.soの指定

Addボタンを押し、"Project Name\Intermediate\Android\APK\gradle\app\src\main\jni"以下にあるlibUE4.soを選択します
f:id:pafuhana1213:20180307235706j:plain

libUE4.soの読み込み完了すると、Android Studio上でエンジン・プロジェクトの各コードにブレークポイントを打てるようになります 。
f:id:pafuhana1213:20180307235814j:plain

5. 実機デバッグ開始

実機を繋げた状態でRunメニューのDebugから実機上で動作させると、ブレークポイントの箇所で処理がストップします
f:id:pafuhana1213:20180307235836j:plain

最後に

この方法を使えば、run-asコマンドが使えない端末、例えばSamsung端末でも実機デバッグが可能です!(Galaxy S6, S7で検証済み)Android Studioはセットアップなどが少しややこしいですが、実機デバッグは開発する上で重要なので是非試してみて下さい!

おわり!

deploygateを使い始めたことでUE4のモバイル開発・検証が非常に捗った件について

$
0
0

f:id:pafuhana1213:20180623224222p:plain

たぶん凄く今更感のある内容ですが、
最近使い始めてUE4を使ったモバイルコンテンツの開発・検証効率がバク上げしたので!
(あとで気づいたのですが、ヒストリアさんが2016年の時点でオススメしているんですよね…ハハハ)

はじめに

最近UE4のモバイル向け機能の検証をすることが多いのですが、

  • 「開発端末を機材置き場から取り出して」、
  • 「USBケーブル経由でPCに繋いで」
  • 「あ、これUSB TypeCじゃないか!とケーブル繋ぎ直して」
  • ようやく動作確認・検証…「あ、別の端末で再度同じ手順で検証しないと…」

というのが非常に面倒でした。おそらく賢い開発現場ならJenkinsなどのCIツールでパッケージ作成後に一斉配布などをしているかと思いますが、CI環境の構築・保守コストが理由で断念していました…

そんなときに見つけたのが、このdeploygateというサービス!
(ジャパネット●かた的なノリ)
deploygate.com

このサービスを利用したことで、先程挙げた面倒な部分が一気に解決しました!無料のプランもあるので、個人でモバイル開発をしている方は超オススメです!

以下はもう少し具体的な内容について説明

参考サイト
[iOS] TestFlight の特徴 と DeployGate との違い | Developers.IO
DeployGate使ってみました - Intelligent Technology's Technical Blog
DeployGateでAndroidアプリを配布する | ITcowork Staff Blog
DeployGateでiOSアプリを配布する方法


deploygateを採用した理由

f:id:pafuhana1213:20180623224944p:plain
(deploygate公式サイトより)

deploygateを採用した理由は上の画像にある以下の点です。

  • インストールも更新もすべてワイヤレス
  • 過去のバージョンに自由に戻せます

この機能のおかげで、はじめにで挙げた面倒な点が一気に解決しました!さらに、個人での機能検証用にしか使っていないので、無料プランで必要十分というのも大きな理由の一つでした!

なお、外部への公開、プライベート設定、チーム開発などの機能が必要な方は、有料のProやグループ開発向けプランを検討する必要があります。詳細はdeploygate公式サイトの料金ページで確認しましょう!

deploygateへの登録

とても簡単です!公式サイト右上にある「新規登録」ページから登録するだけです。
f:id:pafuhana1213:20180623230102p:plain

UE4で作成したパッケージをdeploygateにアップロード

f:id:pafuhana1213:20180623230546p:plain
モバイル向けのパッケージを作って、deploygateのマイページを開いているWebブラウザにD&Dするだけでアップロードできます!

D&Dするのもめんどくさい!という方向けにAPIコマンドラインツールが用意されています。
docs.deploygate.com
docs.deploygate.com

これらを使うことで更に自動化できます。ただ僕の場合は先述の通り自動化環境を用意する予定はなかったので、batツールにD&Dする形に落ち着きました。テキストファイルを開き、以下の内容をコピペして、.txtを.batに変えるだけです。

@echo off

for %%f in (%*) do (
curl -F "token=●●●" -F "file=@%%f" -F "message=sample" https://deploygate.com/api/users/■■■/apps
)
pause;

なお、●●●の部分には、deploygateの「アカウント設定」のページにある「プロフィール」に記載されているAPI Keyを入れてください。そして、■■■にはdeploygateに登録した際のユーザ名を入れてください。あと、curlコマンドを使用しているので、Windows環境のばあいは以下の記事を参考にセットアップする必要があります。
qiita.com

deploygateにアップするAndroid用パッケージを作る際の注意点

androidアプリをdeploygateにアップする場合のみ「obbを作成せずにapk単体で動作するようにするようにする。」という点に注意する必要があります。なぜなら、僕の知る限りでは、deploygateにobbをアップする手段が今の所ないからです(超絶ざっくりobbについて説明すると、apkが100MBを超えることを回避するために生成される拡張ファイルのことです)。

といっても対応は簡単で、プロジェクト設定のAndroidカテゴリにある「Package game data inside .apk?」にチェックをいれるだけです。
f:id:pafuhana1213:20180623231657p:plain

これでobbが作られず全てのパッケージ内容がapkに含まれるので、無事deploygateにアップすることができます。

deploygateにアップしたパッケージを端末にダウンロード

これもとても簡単です!まず、Androidの場合は専用のアプリが公開されています。このアプリを使うことで、deploygateにアップロードされたパッケージ(最新だけでなく過去のものも含む)のインストール・アンインストール・起動ができます。
play.google.com

iOSの場合、専用のアプリはアプリは公開されていないのですが、ブラウザ経由でAndroid用のアプリと同じことができる仕組みが用意されています。
iOS版のDeployGateをインストールする手順 – Customer Feedback & Ideas for DeployGate

この仕組みが用意されているおかげで、複数端末での動作検証・テストを同時に行うことができるようになりました…本当に助かっています…

最後に

deploygateは今回紹介した内容以外にも、マーケティング向けの配布機能・レポート機能などの便利機能があるのですが、機能検証がメインなのでそれらは使えていません…。その辺りは実際にコンテンツを開発・配信している方にパスします!

ともかく!普段からUE4を使ってモバイル開発をしている方には超オススメのサービスです!あとは、deploygateの日本公式twitterアカウントをフォローするのオススメです!
twitter.com

是非使っていきましょう~!で、便利・面白い使い方をしたときは教えてください~!

おわり!

UE4の標準機能とiPhoneXを使って、簡易フェイシャルキャプチャーシステムを実現してみた

$
0
0

はじめに

iPhoneXの表情検出機能を使ったサンプルである「Face AR Sample」が先日公開されました!検出した表情の情報をカイトくんや「AppleARKitFaceMeshコンポーネントにより生成された3Dモデル」に反映することができます。試しに動作している様子を動画に撮ってみました。
f:id:pafuhana1213:20180727200517p:plain
www.youtube.com

これだけだとよくあるコンテンツなのですが…Face AR Sampleにはなんと

PC上のエディタとの同期機能

が用意されています!!!
つまり、iPhoneXで検出した表情の情報をPCに送ることができます。


そして、エディタを実行しなくても同期処理は行われます!


つまり…Personaのアニメーション録画機能を使えば、

UE4の標準機能とIPhoneXだけで、
フェイシャルアニメーションを作成することができます!

うおおおおおおお!!!!!!!!

ということで、手順を簡単に解説します。
なお、当然ながらiPhoneXは必要なのですが、更にビルド用にMacが必須になります。また、PC - iPhoneX間で通信を行う必要があるため、それぞれを同じネットワーク環境下に置く必要があります。

パッケージの作成・インストール

まずは、Face AR Sampleからパッケージを作成しiPhoneXにインストールする必要があります。公式ドキュメントに手順が載っていますので割愛します。

api.unrealengine.com
api.unrealengine.com

なお、デフォルト設定だと全レベルがパッケージに含まれてしまうため、パッケージサイズが1GBを超えてしまいます。パッケージ作成時間も延びてしまうので、今回使用する「FaceTrackingMap_Simplified」レベルだけをパッケージに含める設定にしておきましょう。

f:id:pafuhana1213:20180727202130p:plain:w300

これでパッケージサイズが200MBほどになります。

LiveLink機能を使ってエディタとの同期開始

まずは、Face AR SampleをUE4エディタで開き、PIE( Play In Editor )で実行しておきます。
f:id:pafuhana1213:20180727203524p:plain:w300

次に、インストールしたパッケージを起動し、左下のボタンからオプションを表示します。
f:id:pafuhana1213:20180727202535p:plain:w300

そして、LiveLink Connnectionボタンを押し、ipconfigコマンドなどで確認できる「PC側のIPアドレス」を入力します。ついでに、Save IP Addressのチェックを有効にしておきましょう。

f:id:pafuhana1213:20180727202709p:plain:w300

そして、Connectを押すと、iPhoneXの画面上のキャラクタとUE4エディタ上のキャラクタが同期する(=表情が連動する)ようになります。もししない場合は正しいIPアドレスを指定しているか、同じネットワーク上に存在するかを確認しましょう。

フェイシャルアニメーションの録画

最後に、Personaの録画機能を使ってフェイシャルアニメーションをアセットとして保存してみましょう!
まずは、"Content/Animations"にあるKiteBoyHead_JointsAndBlends_AnimBPを開いて下さい。
f:id:pafuhana1213:20180727204133p:plain:w300
そして、左上のキャラクタとiPhoneX上のキャラクタが同期していることを確認してください。もし同期していない場合は接続が切れている、またはそもそもパッケージを起動していない可能性が高いです。

同期ができていれば、後は録画ボタンからフェイシャルアニメーションを生成することが可能です。その手順を動画にしておきましたのでご確認ください!
youtu.be

「iPhoneXを使ったフェイシャルアニメーションの作成」をエンジンの標準機能だけで実現できてしましました!一つ一つは既存の機能・技術ではありますが、それらを組み合わせることでここまで個人が手軽に実現できてしまうというのは本当に凄いと思います!

オリジナルモデルでフェイシャルキャプチャをする場合

最後に、カイトくんモデル以外ではどうやってiPhoneXで検出した表情を適用するの?ということについて触れます。
ここで重要になるのが、アニムグラフの左端にあるLive Link Poseノードです。
f:id:pafuhana1213:20180727210314p:plain:w300

iPhoneXで検出した各情報はこのノードから取得することが可能です。取得できる情報は以下のページに記載されている各BlendShapeと同名のカーブデータです。
ARFaceAnchor.BlendShapeLocation - ARFaceAnchor | Apple Developer Documentation

そして、各BlendShapeと同名のモーフターゲットをカイトくんモデルを持っているため、表情を反映することができています。
f:id:pafuhana1213:20180727210641p:plain:w300
api.unrealengine.com

つまり、使用したい表情情報に紐づくBlendShapeと同じ名前のモーフターゲットを事前に用意しておけば、自作のモデルであっても表情を反映することが可能なはずです。また、Live Link Poseノード(AnimNode_LiveLinkPose)を拡張すれば、BlendShapeのパラメータを既存でかつ別名のモーフターゲットに適用することも可能なはずです( ULiveLinkRemapAsset::BuildPoseForSubjectのマッピング処理部分を拡張する流れのはず… )。

…「はず」が多い。ダレカ、ケンショウシテ! ナンデモシマスカラ!

最後に

今回実現したフェイシャルキャプチャと、PerceptionNeuronやIkinemaのOrionを使ったモーションキャプチャを組み合わせることができれば、以下の動画のようなことができるようになります!
www.youtube.com

もちろん精度はまだまだ劣るとは思いますが、「個人レベルでもフェイシャル+モーションキャプチャができる、しかもエンジン標準機能だけで!」という点が本当に素晴らしいです。高価なシステムを用意したり、キャプチャ用のシステムを独自に実装する必要もないので、小・中規模の会社にとっても非常に魅力的かと思います!
色んな活用例があるかと思いますので、是非触ってみて面白いことをしてみてください!

最後の最後に宣伝。
先日予約開始して8月28日発売予定の「VRコンテンツ開発ガイド 2018 」にて、今回紹介したFace AR SampleやAR Templateについての解説を書きました。AR Templateに関する内容が主なのですが、Face AR Sampleの各要素についてもう半歩だけ踏み込んだ内容を書いていますので、ご興味のある方は是非手にとっていただけますと幸いです。

VRコンテンツ開発ガイド 2018

VRコンテンツ開発ガイド 2018

印税でお肉食べたい

おわり

「出張ヒストリア! ゲーム開発勉強会2018」にてUE4のポストプロセスに関する講演をしました!

$
0
0

atnd.org

2018/8/5に開催された「出張ヒストリア! ゲーム開発勉強会2018」にて、UE4のポストプロセスの使い方・各機能の紹介について講演しました!

www.slideshare.net

ぷちコンなどで「ポストプロセスがデフォルト設定のままでもったいないなぁ」と思うことがしばしばあり、どこかのタイミングで話したいとずっと思っていたので、講演の場を頂いたヒストリアさんには本当に感謝感謝です。今回時間の関係で話さなかったポストプロセスマテリアルについては別の機会で話せたらなぁと思ってます(スライド作るの大変だろうなぁ…(;´∀`))。

この資料が少しでも作品作りの役に立てば幸いです。ではでは~。

(今後は講演スライドを公開したらtwitterだけでなくブログでも書こうと思います。感想や補足など入れつつ…い、いや、決して、更新頻度を、楽に、あげようと、思っている、わけでは…ゴニョゴノニョ)

Frame Grabber機能を使って、レンダリング結果(フレームバッファ)をテクスチャ化する方法について

$
0
0

はじめに

ゲーム中に今画面に映っている内容をテクスチャ化したいケース、色々あると思います!
バトル画面への遷移演出(画面がパリーンと割れたり、ねじ曲がったり…)で使ったり、セーブ画面でのサムネイルだったり…などなど

上記のようなことをしたい場合、SceneCapture2DアクターやSceneCaptureComponent2Dを使うのが一般的です。
api.unrealengine.com

しかし、SceneCapture系は同じ内容をもう一度描画する必要があるため、かなりの処理負荷が発生します…。そのため、画面をキャプチャしたタイミングでフレームレートが急激に低下し、カクつきが発生してしまう可能性があります。
少し前のバージョンから描画対象のアクターを限定できたり、使用するポストプロセスを制限することは可能になりました。それらを駆使すれば負荷は抑えられますが、見た目が元の描画結果と異なってしまうため、やりたかった演出とは程遠いものになっていまう可能性が出てきます。
f:id:pafuhana1213:20180826235049p:plain

近い機能としてスクリーンショット機能があります。しかし、これはテクスチャアセットではなく .pngファイルで出力するため、ゲーム中で使用するのは少し面倒です。処理負荷もそこそこあります。
api.unrealengine.com
pafuhana1213.hatenablog.com

Frame Grabber

そこで今回ご紹介するのがFrame Grabber機能です!
api.unrealengine.com

この機能を使えば、描画結果(フレームバッファ)から直接テクスチャアセットを作成することが可能です!そのため、SceneCapture系のようにもう一度描画する必要がないため、処理負荷を大幅に抑えることが可能です!さらに、ポストプロセス適用後の絵をキャプチャできるので、SceneCapture系であった微妙な色味の違いも回避できる(はず)です!

Frame Grabberを用いたサンプル

ただ…C++が必要になったりで…少し使うのが面倒なので…
今回久々にサンプルを用意しました!
github.com
f:id:pafuhana1213:20180827000404p:plain

  • 描画結果をテクスチャ化して、Materialに渡すだけの簡単なサンプルです
  • 1キーを押すとキャプチャ開始します(Level BP参照)
  • 詳細はFrameGrabberActor.cpp / hをご確認くださいまし。
  • UE4.20.2 + PC環境で動作確認済みです。(たぶん、UE4.18, 4.19でも動くはず)
    • Androidでは動作しないため、glReadPixels(RHIReadSurfaceData )を使用する必要があるとのこと
  • 用途に応じて改造すること推奨。雑実装なので…

注意点としましては、UIも含めた描画結果がテクスチャ化されます。これはFrame Grabberの仕様です…。UIを含まない描画結果、つまりポストプロセス適用直後のフレームバッファをキャプチャできるようにするとは聞いています…ご期待下さい…!
(もしお仕事などの関係で早くほしいという方は…ご一報くださいまし)

ではでは~

Viewing all 159 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>