UE4初心者が頑張ってるブログ

Unreal Engine4を使用した開発メモ、及びそれに関連することについて不定期に書いています。

UE4でWebページを作ってみたかった

Unreal Engine 4 (UE4) その2 Advent Calender 2017

参加9日目の記事です。

qiita.com

 

今回は私のやってみたかったことをやった結果になります。

タイトルの通りUE4でWebページが作れるのかを試してみました。

 

結果を先に言うと作れます(軽くはない)

8日の朝に明日は私の番であるということに気がついたので、

バタバタ作ってみました。

その手順を紹介したいと思います。

 

(時間がなかったんだ!!)

 

ではやっていきましょう。

 

準備

今回はUE4 4.18.1を使用しています。

f:id:MozPaca:20171208170534j:plain

 

今回のプロジェクトではHTMLビルドを行います。

UE4起動ボタンのドロップダウンを開き、

オプションを選択します。

f:id:MozPaca:20171208170930j:plain

 

対応プラットフォームにHTML5にチェックが入っていることを

確認してください。

チェックが入っていない場合はHTML5チェックボックス

ONにして適応ボタンを押してください。

f:id:MozPaca:20171208170942j:plain

 

プロジェクトを作成する

では本題に入っていきます。

まずは新規プロジェクトを作成しましょう。

f:id:MozPaca:20171208170913j:plain

 

今回はUMGをメインで使用するので、

Mobile/Tablet、Scalable 3D or 2D、 スターターコンテンツなしで

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

 

Widgetを作成する

プロジェクトが作成できたら、Widgetを作成していきます。

コンテンツブラウザを右クリック、

User InterfaceWidget Blueprintを選択します。

f:id:MozPaca:20171208173425j:plain

 

名前は適当にWidget_Baseとしました。

※Header、Footer部分になる箇所を分けて作成してもいいかもしれません。

f:id:MozPaca:20171208173631j:plain

 

かなり適当な作り方をしたので、

詳しくは書きませんが、

Webページの見た目となる部分を作成します。

 

Vertical Boxなどを使っていないため、

解像度を変更するとえげつないズレ方をするため、

これを実践する際にはレスポンシブ的な対応をする必要があるかと思います。

f:id:MozPaca:20171208182807j:plain

 

今回はボタンの反応などは入れてません。

 

新規マップを作成する

デフォルトのマップには色々オブジェクトが配置されているので、

新規マップを作成して、何もない空間を作成します。

左上のFile→New Levelを選択します。

f:id:MozPaca:20171208173903j:plain

 

Empty Levelを選択します。

f:id:MozPaca:20171208174455j:plain

 

マップを作成したら保存しておきましょう。

f:id:MozPaca:20171208174533j:plain

 

今回はMap_Indexという名前にしました。

f:id:MozPaca:20171208174629j:plain

 

レベルブループリントを編集する

Map_Indexのレベルブループリントを編集します。

上のBlueprintsタブからOpen Level Blueprintを選択します。

f:id:MozPaca:20171208174756j:plain

 

レベルブループリントでは、このようにWidget

生成/取り付けを行う処理を書きます。

f:id:MozPaca:20171208175342j:plain

 

これでMap_Indexを開くとWidget_Baseが取り付けられます。

 

HTMLファイルの書き出しを行う

処理が大体終わったので、HTMLビルドを行います。

左上のFileからPackage Project→HTML5を選択します。

f:id:MozPaca:20171208175547j:plain

 

書き出されました。

f:id:MozPaca:20171208175814j:plain

 

localhostで起動する

 

f:id:MozPaca:20171208180010j:plain

 

HTML5LaunchHelper.exeを起動すると、

ローカルのサーバーが立ち上がります。

ポートは8000のようです。

f:id:MozPaca:20171208180023j:plain

 

適当なブラウザを開き、localhost:8000のHTMLファイルにアクセスします。

f:id:MozPaca:20171208180230j:plain

 

開きました。

f:id:MozPaca:20171208180404j:plain

 

サーバーにアップして起動する

ローカルホストで確認できたので、今度はサーバーにアップして

確認してみましょう。

 

ファイルのアップにはFileZillaを使用しています。

f:id:MozPaca:20171208180514j:plain

 

サーバーに書き出されたHTML5ファイルごとアップロードします。

いらないファイルも混ざってるかもですが気にしない。

f:id:MozPaca:20171208180754j:plain

 

ブラウザからURLを入力してページを開くと、

localhostと同じように起動しました。

f:id:MozPaca:20171208181108j:plain

 

しっかりとボタンの反応などを組み込めば、

Webページとして活用できるかもしれません。

 

f:id:MozPaca:20171208182209g:plain

 

明日はcom04さんの「ぷちコン与太話-マテリアルゲーム作った話-」です。

個人的にものすごく楽しみにしてます!

UE4 ADX2 LEを使って足音を実装してみよう

前回ADX2 LEの導入記事を書きました。

 

前回↓

mozpaca.hatenablog.com

 

今回はADX2 LEのCri Atom Craft上で編集した

サウンドデータで足音を作成し、UE4で再生してみようと思います。

 

通常、足音などを再生する場合は複数の足音のデータを

Waveファイルとしてインポートし、

Sound Cueでランダムに再生するかと思います。

 

イメージ:

f:id:MozPaca:20171020154302p:plain

...まぁ面倒くさい。

データ容量も大きくなるし、

100種類の足音とかだったらノードも見づらくなります。

 

ベースの足音を用意する

今回は1種類の足音につき1つのWaveファイルで表現します。

とりあえず、何かしらの足音を1つ用意しましょう。

 

フリー素材でも大丈夫ですが、

私は玄関の床を革靴で叩いて収録した音を、

使いやすいように調整した音を用意しました。

f:id:MozPaca:20171020154806j:plain

 

Cri Atom Craftを起動する

用意したWaveファイルをCri Atom Craftで編集していきます。

 

Cri Atom Craftを起動してください。

起動したら、左上のファイルから

プロジェクトファイルを開くを選択し、

前回作成したプロジェクトを開きましょう。

f:id:MozPaca:20171020155615j:plain

 

開きました。

f:id:MozPaca:20171020155510j:plain

 

足音用のフォルダを作成する

今回はフォルダ分けなどを丁寧に行っていきます。

 

マテリアルルートフォルダを右クリックし、

新規オブジェクト→サブフォルダの作成をクリックしてください。

f:id:MozPaca:20171020155949j:plain

 

サブフォルダが出来ました。

このサブフォルダの名前をFootStepに変更します。

f:id:MozPaca:20171020160006j:plain

 

変更したFootStepフォルダに足音のWaveファイルを入れていきましょう。

f:id:MozPaca:20171020160019j:plain

インポートは後で行います。

 

ワークユニットのキューシートフォルダを右クリック

新規オブジェクト→サブキューシートフォルダの作成をクリックしてください。

f:id:MozPaca:20171020160717j:plain

 

作成したサブフォルダにFootStepと名前をつけます。

f:id:MozPaca:20171020160730j:plain

 

FootStepフォルダを右クリック

新規オブジェクト→キューシートの作成をクリックします。

f:id:MozPaca:20171020160740j:plain

 

今回は足音用のキューシートにする予定なので、

Cue Sheet_FootStepと名前を変更します。

f:id:MozPaca:20171020161224j:plain

 

Waveファイルをインポートする

マテリアルルートフォルダに作成したFootStepフォルダに

用意したWaveファイルをドラッグアンドドロップしましょう。

f:id:MozPaca:20171020161557j:plain

 

waveファイルがインポートができたと思います。

f:id:MozPaca:20171020161612j:plain

 

次に作業用のCueSheet_FootStepに

インポートしたWaveファイルをドラッグアンドドロップします。

f:id:MozPaca:20171020161623j:plain

 

CueSheet_FootStepにWaveファイルが追加されました。

f:id:MozPaca:20171020161634j:plain

 

音を編集する

ここから音の編集をしていきます。

読み込んだ音を選択してください。

そしてFX1タブを開きます。

f:id:MozPaca:20171020173711j:plain

 

今回はこのFX1タブの中で音を編集していきます。

f:id:MozPaca:20171020173926j:plain

 

このようにピッチやボリュームの大きさを調節したり、

上にドラッグすることで、ここからここまでという範囲を指定できます。

その範囲の中をランダムで再生します。

f:id:MozPaca:20171020174409g:plain

 

今回はピッチの値をランダムに返してほしいので、

画像のようにしてみました。

f:id:MozPaca:20171020175109j:plain

 

次に減衰設定を行います。

Atom Cueの方を選択してください。

f:id:MozPaca:20171020175149j:plain

 

3Dポジショニングタブを開きます。

減衰距離の最小/最大のパラメータを変更しましょう。

f:id:MozPaca:20171020175240j:plain

 

最小を50.0、最大を3000.0にしました。

ここはUE4で再生しながら確認するといいと思います。

f:id:MozPaca:20171020175422j:plain

 

キューシートをビルドする

編集はこのあたりにして、CueSheet_FootStepを

右クリックからAtomキューシートバイナリのビルドを選択します。

f:id:MozPaca:20171020175628j:plain

 

Cue_Sheet_FootStepにチェックが入っているのを確認して

ビルドボタンをクリックしましょう。

f:id:MozPaca:20171020175821j:plain

 

ビルドしたデータをUE4にインポートする

ビルドしたデータは指定した出力パスにあります。

.acbファイルをUE4にインポートしましょう。

f:id:MozPaca:20171020180016j:plain

 

インポートしました。

f:id:MozPaca:20171020180720j:plain

 

音を再生したいタイミングで

AnimationにNotifyを追加します。

f:id:MozPaca:20171020180744j:plain

 

そしてこのように処理を組み、

インポートした.acbファイルを再生します。

f:id:MozPaca:20171020180826j:plain

 

確認してみる

どうでしょうか?

1つの音声データからUE4上で編集することなく、

ランダムピッチな足音が再生されていると思います。

www.youtube.com

UE4 ADX2 LEを導入する

今回はCRI・ミドルウェアのADX2 LEを

UE4に導入してみたいと思います。

CRI ADX2 LE - CRI Middleware

 

UE4にはSound Cueのような

サウンドの強力な機能があります。

が!もうちょっと機能が欲しいなんてこともあります。

UE4の機能を自作すればいいのでは...

 

ミドルウェアはADX2LE以外にも

WwiseやFMODなどがUE4でよく使われています。

 

Wwise

WwiseのUE4インテグレーションについて - ぼっちプログラマのメモ

 

サウンドミドルウェア【Wwise】と【UnrealEngine4】を連携する - I From Japan Staff Blog

 

FMOD

UE4 + FMOD でインタラクティブなサウンド体験を実現しよう! | rarilog

 

ADX2LEとは

ADX2LEは株式会社CRI・ミドルウェアから販売されている

「ADX2」の無償版です。無償版ですが、機能は製品版と同じです。

有償版との違いは、ほぼ全てのゲームプラットフォームでのゲーム開発に対応していて、

ライセンスにはサポートが含まれています。

無償版を使用し開発したコンテンツ、アプリの配布/販売には制限があります。

詳細は公式ページを確認してください。

 

準備

ここから本題に入ります。

まずはADX2 LE SDKをダウンロードしましょう。

http://www.adx2le.com/download/index.html

 

f:id:MozPaca:20171020115856j:plain

 

ダウンロードしたZipファイルを解凍し、

中に入っている「cri」フォルダを任意のディレクトリに移動してください。

推奨はCドライブのルートディレクトリですが、

私はD:/CRIAtomCraft/cri/という感じで配置しています。

 

UE4プロジェクトを作成する

今回はUE4 4.17.2を使用しています。

f:id:MozPaca:20171020123846j:plain

 

今回はFirst Person テンプレートを使用し、

ADX2LEというプロジェクト名をつけています。

f:id:MozPaca:20171020123913j:plain

 

作成されました。

f:id:MozPaca:20171020124055j:plain

 

ここまで出来たら、

UE4エディタは一旦閉じておきましょう。

 

CRIWARE Pluginを有効にする

エンジン単位でPluginを入れることも出来ますが、

私はプロジェクトごとにPluginを入れる派なので

今回はプロジェクトごとに入れるようにしていきます。

 

まずは、プロジェクトフォルダを開きます。

Epic Games Launcherで作成したプロジェクトを右クリックし、

フォルダを開くを選択します。

f:id:MozPaca:20171020124542j:plain

 

プロジェクトフォルダが開けたら

cri/UE4/Engine/にあるConfigフォルダと、Pluginsフォルダを

f:id:MozPaca:20171020124116j:plain

 

プロジェクトフォルダのルートにドラッグアンドドロップ

もしくはコピーアンドペーストで持って行きます。

f:id:MozPaca:20171020125128j:plain

 

こんな感じにプロジェクトフォルダになったらオッケーです。

f:id:MozPaca:20171020125336j:plain

 

再びUE4エディタを起動しましょう。

 

エディタが起動したら、

左上のEdit→Plugin を選択しましょう。

f:id:MozPaca:20171020125612j:plain

 

MiscタブにCRIWARE Pluginがあるので、

Enabledにチェックをつけ、エディタを再起動します。

f:id:MozPaca:20171020125434j:plain

 

再起動後、PluginタブでCRIWARE Pluginにチェックがついているか確認しましょう。

f:id:MozPaca:20171020125828j:plain

 

ライブラリの初期化を行う

左上のEditからProject Settingsを選択します。

f:id:MozPaca:20171020130237j:plain

 

Plugin/CriWareタブでライブラリの初期化を行うことができます。

自分でパラメータをカスタムしない場合は自動的に初期化されますので、

今回はデフォルトのままで扱います。

f:id:MozPaca:20171020130316j:plain

 

データの読み込みの設定を行う

このPluginはCRI Atom Craft(後述)で作成した

・ACFファイル

・ACBファイル

・AWBファイル

を使用します。

 

この中のAWBファイル(ストリーム再生データ)は

レベルロード時に自動的にメモリにロードされないので、

設定が必要です。今回は省略します。

 

こちらを参照してください。

CRI ADX2 LE マニュアル (for Unreal Engine 4)

 

CRI Atom Craftを起動する

cri/tools/criatomex/にあるCriAtomCraft.exeを起動します。

f:id:MozPaca:20171020120927j:plain

 

左上のファイルからプロジェクトの新規作成を選択します。

f:id:MozPaca:20171020131827j:plain

 

プロジェクト名とプロジェクトのファイルパスを決めて、

新規プロジェクトのボタンをクリックします。

f:id:MozPaca:20171020131904j:plain

 

次にワークユニットの追加をします。

今回はデフォルトのまま追加をクリックします。

f:id:MozPaca:20171020131955j:plain

 

プロジェクトが作成されました。

f:id:MozPaca:20171020132059j:plain

 

左下のマテリアルルートフォルダに使いたいWaveファイルを

ドラッグアンドドロップします。

f:id:MozPaca:20171020141603j:plain

 

これでWaveファイルをCri Atom Craftにインポートすることができました。

f:id:MozPaca:20171020141705j:plain

 

インポートしたWaveファイルをワークユニットのCue Sheetに

ドラッグアンドドロップします。

f:id:MozPaca:20171020141842j:plain

 

これでWaveファイルをCri Atom Craftで編集できるようになりました。

f:id:MozPaca:20171020141936j:plain

 

ここからWaveファイルを編集していくのですが、

今回は導入記事ですので、割愛します。

f:id:MozPaca:20171020142123j:plain

 

Cue Sheet Binaryのビルドをする

Waveファイルを編集したとして、

編集データなどを書き出さなければなりません。

 

まずは、ビルドからAtom キューシートバイナリのビルドをクリックします。

f:id:MozPaca:20171020142435j:plain

 

書き出し先のパスや、ビルドをしたいCue Sheetを選択して、

ビルドボタンをクリックします。

f:id:MozPaca:20171020142651j:plain

 

ビルドが完了すると

指定したパスの中にacbファイルが作成されます。

f:id:MozPaca:20171020142908j:plain

 

UE4にインポートする

UE4のインポートボタンから先程作成した、

acbファイルをインポートします。

f:id:MozPaca:20171020143342j:plain

 

今回はこのファイルですね。

 

f:id:MozPaca:20171020143353j:plain

 

すると、このようにCue Sheetとその中に含まれた、

音のデータがインポートされます。

f:id:MozPaca:20171020143405j:plain

 

UE4上で再生する

インポートされたAtom Cueは通常のSound Cueファイルのように

扱うことができます。

 

レベル上に配置をしたり、

f:id:MozPaca:20171020143825j:plain

 

ブループリントから再生することもできます。

f:id:MozPaca:20171020144018j:plain

 

ここで注意したいのが、

再生ノードの違いについてです。

同じ名前ですが、通常の再生とCri Atom Craftで作成したファイルの再生とで

ノードが違います。

Atomカテゴリーに入っているノードを再生に使用してください。

f:id:MozPaca:20171020144149j:plain

 

 

 

UE4 Sound Cueに自作のノードを追加する その2

前回に引き続き自作ノードを作っていきましょう。

今回から機能をつけていきます。

 

↓前回

mozpaca.hatenablog.com

 

前回はC++クラスを作成し、

Sound Cueにノードを出すところまでやりました。

 

C++を編集する

まずはソース全体を載せておきます。

 

SoundNodeTest.h


// Fill out your copyright notice in the Description page of Project Settings.

#pragma once

#include "CoreMinimal.h"
#include "Sound/SoundNode.h"
#include "SoundNodeTest.generated.h"

UCLASS(hidecategories = Object, editinlinenew, MinimalAPI, meta = (DisplayName = "Volume"))
class USoundNodeTest : public USoundNode
{
	GENERATED_UCLASS_BODY()

	// float パラメータ
	// ボリュームの大きさ
	UPROPERTY(EditAnywhere, Category = Volume, meta=(ClampMin = "0.0"))
	float TestVolume;

	// bool パラメータ
	// ミュートかどうか
	UPROPERTY(EditAnywhere, Category = Volume)
	bool TestIsMute;

	virtual void ParseNodes(FAudioDevice* AudioDevice, const UPTRINT NodeWaveInstanceHash, FActiveSound& ActiveSound, const FSoundParseParameters& ParseParams, TArray<FWaveInstance*>& WaveInstances) override;

#if WITH_EDITOR
	virtual FText GetInputPinName(int32 PinIndex) const override;
#endif

};

 

SoundNodeTest.cpp


// Fill out your copyright notice in the Description page of Project Settings.

#include "Public/Sound/SoundNodeTest.h"
#include "ActiveSound.h"

#define LOCTEXT_NAMESPACE "SoundNodeTest"

/** コンストラクタ */
USoundNodeTest::USoundNodeTest(const class FObjectInitializer& ObjectInitializer) : Super(ObjectInitializer)
{
	// パラメータの初期化
	TestVolume = 1.f;
	TestIsMute = false;
}

void USoundNodeTest::ParseNodes(FAudioDevice* AudioDevice, const UPTRINT NodeWaveInstanceHash, FActiveSound& ActiveSound, const FSoundParseParameters& ParseParams, TArray<FWaveInstance*>& WaveInstances)
{
	FSoundParseParameters UpdateParameters = ParseParams;

	if(TestIsMute == true)
	{
		UE_LOG(LogTemp, Log, TEXT("ミュート再生"));
		UpdateParameters.Volume = 0.0f;
	}
	else
	{
		UE_LOG(LogTemp, Log, TEXT("ボリューム : %f"), TestVolume);
		UpdateParameters.Volume = TestVolume;
	}

	Super::ParseNodes(AudioDevice, NodeWaveInstanceHash, ActiveSound, UpdateParameters, WaveInstances);
}

#ifdef WITH_EDITOR
FText USoundNodeTest::GetInputPinName(int32 PinIndex) const
{
	return LOCTEXT("InputPinLabel", "Input");
}
#endif

#undef LOCTEXT_NAMESPACE


 

 

SoundNodeTest.h から細かく見ていきます。

 


UCLASS(hidecategories = Object, editinlinenew, MinimalAPI, meta = (DisplayName = "Volume"))

 

UCLASSに引数を持たせています。

 

hidecategory

HideCategories | Unreal Engine

 

editinlinenew

EditInlineNew | Unreal Engine

 

MiniMalAPI

MinimalAPI | Unreal Engine

 

meta = (DisplayName = "Volume")

※これだけドキュメントが見つからなかった...
簡単に説明すると" "で囲まれた文字列が、

ノードの名前になります。

 

前回まではC++ファイル名がそのままノードに

なっていたので、今回からVolumeという名前にしました。

 

次にこれですね。


GENERATED_UCLASS_BODY()

 

 前回レガシーらしいと言いましたが、


GENERATED_BODY()

では動かなかったので、こちらにしています。

 

まだ違いを確認出来ていないので、

次回にでも説明できればと思います。

 


// float パラメータ
	// ボリュームの大きさ
	UPROPERTY(EditAnywhere, Category = Volume, meta=(ClampMin = "0.0"))
	float TestVolume;

	// bool パラメータ
	// ミュートかどうか
	UPROPERTY(EditAnywhere, Category = Volume)
	bool TestIsMute;

 

ノードに持たせるパラメータの宣言をしています。

UPROPERTYについてはこちらを参考にしてください。

UPROPERTY - Epic Wiki

 

主に、

・編集可能かどうか

・ノードのカテゴリは何か

・数値データの最低値はどこか

を設定しています。 

 

    
virtual void ParseNodes(FAudioDevice* AudioDevice, const UPTRINT NodeWaveInstanceHash, FActiveSound& ActiveSound, const FSoundParseParameters& ParseParams, TArray<FWaveInstance*>& WaveInstances) override;

#if WITH_EDITOR
 virtual FText GetInputPinName(int32 PinIndex) const override;
#endif

 

関数を2つ宣言しています。

 

SoundNodeTest.cppも見ていきましょう。

 

    
/** コンストラクタ */
USoundNodeTest::USoundNodeTest(const class FObjectInitializer& ObjectInitializer) : Super(ObjectInitializer)
{
	// パラメータの初期化
	TestVolume = 1.f;
	TestIsMute = false;
}
    

 

コンストラクタです。

各パラメータの初期値をここで設定しています。

 

    
void USoundNodeTest::ParseNodes(FAudioDevice* AudioDevice, const UPTRINT NodeWaveInstanceHash, FActiveSound& ActiveSound, const FSoundParseParameters& ParseParams, TArray<FWaveInstance*>& WaveInstances)
{
	FSoundParseParameters UpdateParameters = ParseParams;

	if(TestIsMute == true)
	{
		UE_LOG(LogTemp, Log, TEXT("ミュート再生"));
		UpdateParameters.Volume = 0.0f;
	}
	else
	{
		UE_LOG(LogTemp, Log, TEXT("ボリューム : %f"), TestVolume);
		UpdateParameters.Volume = TestVolume;
	}

	Super::ParseNodes(AudioDevice, NodeWaveInstanceHash, ActiveSound, UpdateParameters, WaveInstances);
}

 

一つ目の関数です。

ノードが上手く繋がっていれば、ここに入ってきます。

 

ActiveSound.hの中にある構造体

FSoundParseParametersを変数格納し、

引数のParseParamsを代入します。

 

次にTestIsMuteパラメータにチェックが入っているかを確認し、

入っていればVolumeを0にします。

逆に入っていなければ、TestVolumeパラメータの値を代入します。

 

最後にSuper(USoundNodeクラス)のParseNodesを呼び出します。

今回更新しているのは第3引数に渡したUpdateParametersだけですね。 

 

 二つ目の関数です。

 


FText USoundNodeTest::GetInputPinName(int32 PinIndex) const
{
	return LOCTEXT("InputPinLabel", "Input");
}

 

ノードのInput側のピンに名前をつけています。

今回はインプットピンが一つしかないので、

何の意味もありませんが、Inputという名前をつけてみました。

 

 

ひとまずC++はこんなところです。

 

ビルドをしてUE4エディタを立ち上げましょう。

 

Waveファイルをインポートする

特に意味はありませんが、Waveファイルを

格納するためのフォルダを作成しましょう。

 

コンテンツブラウザから右クリック

New Folderを選択します。

f:id:MozPaca:20171017181908j:plain

 

名前はこんな感じにしました。

f:id:MozPaca:20171017181920j:plain

 

作成したフォルダの中に

Waveファイルをインポートします。

f:id:MozPaca:20171017181941j:plain

※魔王魂からダウンロードしました。

 

Sound Cueを編集する

前回作成した「Cue_Test」ファイルを

ダブルクリックで開きます。

f:id:MozPaca:20171017182237j:plain

 

エディタにインポートしたWaveファイルを

ドラッグアンドドロップで持って行きます。

f:id:MozPaca:20171017182316j:plain

 

インポートしたWaveファイルをパラメータとして持つ

Wave Playerノードが出ました。

f:id:MozPaca:20171017182500j:plain

 

次に自作ノードのVolumeを出します。

f:id:MozPaca:20171017183144j:plain

 

そしてこのように繋げましょう。

f:id:MozPaca:20171017183217j:plain

 

完成しました。

 

確認してみる

Volumeのパラメータを変更しながら、

再生してみましょう。

f:id:MozPaca:20171017183350j:plain

 

Volumeが0になるとサウンドがストップするので、

そこだけ注意してください。

 

www.youtube.com

 

 

 

UE4 Sound Cueに自作のノードを追加する その1

最近流行っている...かどうかは知りませんが、
Sound Cueに自作のノードを作っていきたいと思います。

 

ソースを読みながらチマチマ調べたことなので、

「ここはこうした方がいい」というのがあれば教えてください。

準備

新しいプロジェクトを作成しましょう。

 

今回はUE4 4.18.0 Preview 4と

f:id:MozPaca:20171016222835j:plain

Visual Studio 2017を使用しています。

f:id:MozPaca:20171016223717j:plain

 

New ProjectからC++タブを選択します。

TemplateやStarter Contentsは特に必要ないので、

Basic Code、No Starter Contentsを選択しています。

 

プロジェクト名を適当に決め、プロジェクトを作成してください。

f:id:MozPaca:20171016223035j:plain

 

UE4エディタとVisual Studioがそれぞれ立ち上がると思います。

f:id:MozPaca:20171016223806j:plain

f:id:MozPaca:20171016223909j:plain

 

新規のC++ファイルを作成する

プロジェクトの作成が完了したら、

UE4エディタからC++ファイルを作成します。

 

エディタ左上のFile→New C++ Class...をクリックします。

f:id:MozPaca:20171016224159j:plain

 

※コンテンツブラウザからでもC++ファイルを作成できます。

f:id:MozPaca:20171016224310j:plain

 

New C++ Class...を選択すると、このような画面が出ます。

BPでもあるようにここで親クラスを選択します。

f:id:MozPaca:20171016225029j:plain

 

ただ最初に表示されているクラスに目的の親クラスはないので、

Show All Classesにチェックを入れ、全てのクラスを表示させます。

f:id:MozPaca:20171016225149j:plain

 

今回使用する親クラスは「SoundNode」クラスです。

SoundNodeクラスを選択し、Nextのボタンをクリックします。

f:id:MozPaca:20171016225308j:plain

 

次に作成するC++ファイルの名前と格納場所を決定します。

f:id:MozPaca:20171016225409j:plain

 

今回はこんな感じにしました。

決定したらCreate Classをクリックしてください。

f:id:MozPaca:20171016225453j:plain

 

これでC++ファイルが作成されました。

 

作成したC++ファイルを見る

次はVisual Studio上での作業になります。

 

先程作成したC++ファイルが指定した場所にあるのを確認しましょう。

f:id:MozPaca:20171016225805j:plain

 

 

まずはSoundNodeTest.hを見ていきます。 


// Fill out your copyright notice in the Description page of Project Settings.

#pragma once

#include "CoreMinimal.h"
#include "Sound/SoundNode.h"
#include "SoundNodeTest.generated.h"

/**
 * 
 */
UCLASS()
class ADDSOUNDNODE_API USoundNodeTest : public USoundNode
{
	GENERATED_BODY()
	
	
};
 

※他のファイルにはGENERATED_UCLASS_BODY()と記述されてますが、

調べたところによるとレガシーらしいです。

 

次にSoundNodeTest.cppを見てみます。

 


// Fill out your copyright notice in the Description page of Project Settings.

#include "SoundNodeTest.h"
 

 何もない!

 

実はもうノードは出来ている

まだ何もしていませんが、

実はもうSound Cueのノードとして生成されています。

 

ビルドをしてUE4エディタを立ち上げましょう。

 

コンテンツブラウザから右クリック

Sounds→Sound Cueを選択します。

f:id:MozPaca:20171016232536j:plain

 

適当な名前をつけましょう。

f:id:MozPaca:20171016232637j:plain

 

作成したSound CueのPaletteを見てみると、

作成したC++のファイル名がそのままノードになっています。

f:id:MozPaca:20171016232716j:plain

 

ノードして出してみるとこんな感じです。

f:id:MozPaca:20171016232803j:plain

 

中身は空なので繋いでも何も起きませんが、

次回からこのノードに機能をつけていきましょう。

 

UE4 UnrealEngine4の導入手順

今回はUnreal Engine4の導入手順を紹介します。

 

ブラウザ(Microsoft Edge / Google Chromeなど)から

こちらのサイトにアクセスします。

www.unrealengine.com

 

Epic Gamesアカウントを作成する

アカウントを既に持っている方は、ログインをして

Epic Games Launcherをインストールする」から進めてください。

 

画面右上のダウンロードボタンの左にある人のマークをクリックしてください。

f:id:MozPaca:20170926131433p:plain

 

画面下にある「サインアップ」をクリックします。

f:id:MozPaca:20170926131634j:plain

 

次に必要情報を記述していきます。

f:id:MozPaca:20170926131659j:plain

 

必要情報が入力できたら、

「私はサービス利用規約の内容を理解し同意します。」に

チェックをつけ、「アカウントの作成」ボタンをクリックします。

 

サインアップが完了したら、

登録したメールアドレスとパスワードを使用して、サインインをしましょう。

f:id:MozPaca:20170926132012j:plain

 

Epic Games Launcherをインストールする

既にEpic Gamesアカウントを持っている方はここから進めてください。

 

再びこちらのサイトにアクセスします。

www.unrealengine.com

 

ページ中央、もしくは右上のダウンロードボタンをクリックします。

f:id:MozPaca:20170926132336j:plain

 

しばらくするとEpic Installerがダウンロードされます。

f:id:MozPaca:20170926132457j:plain

 

しばらくしてもダウンロードが開始されない場合は

PCに合わせてWindows / Macのボタンをクリックして、

ダウンロードしてください。

f:id:MozPaca:20170926132533j:plain

 

ダウンロードしたEpic installerをダブルクリックで起動します。

f:id:MozPaca:20170926132703j:plain

 

「インストール」ボタンをクリックして、インストールします。

f:id:MozPaca:20170926132921j:plain

 

Unreal Engine4をインストールする

デスクトップに作成された「Epic Games Launcher」を

ダブルクリックで起動します。

f:id:MozPaca:20170926133058j:plain

 

先程登録したメールアドレスとパスワードを入力して、

サインインしましょう。

f:id:MozPaca:20170926133222j:plain

 

「ライブラリ」タブを選択し、「スロットの追加」をクリックします。

f:id:MozPaca:20170926133333j:plain

 

インストールしていないバージョンの一覧が表示されるので、

インストールしたいバージョンを選択します。

f:id:MozPaca:20170926133350j:plain

 

インストールするバージョンが選択できたら、

「インストール」ボタンをクリックします。

f:id:MozPaca:20170926133413j:plain

 

インストールする場所を選択し、

「インストール」ボタンをクリックすると、インストールが始まります。

f:id:MozPaca:20170926133430j:plain

 

インストール完了後、「起動」ボタンをクリックすると

Unreal Engien4が立ち上がります。

f:id:MozPaca:20170926133654j:plain

 

 

 

UE4 マテリアルの色をランダムに変更する

最近、マテリアルの記事書いてないなぁ。

ってことで今回はマテリアルとブループリントを使用して
マテリアルの色をランダムに変更する処理を作成したいと思います。

 

実は過去記事で今回の処理と同じ処理が写ってたりします。

mozpaca.hatenablog.com

 

準備

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

今回はUE4 4.17.0を使用しています。

f:id:MozPaca:20170816171921j:plain

 

作成しました。

f:id:MozPaca:20170816172205j:plain

 

マテリアルを作成する

プロジェクトを作成できたら、

コンテンツブラウザを右クリック→Materialを選択し、

新しいマテリアルを作成しましょう。

f:id:MozPaca:20170816172250j:plain

 

適当な名前をつけておきます。

f:id:MozPaca:20170816172408j:plain

 

作成したマテリアルをダブルクリックで開き、

このようにノードを繋げます。

f:id:MozPaca:20170816172440j:plain

Vector ParameterをBase Colorにつなぐシンプルなものです。

 

Vector ParameterのParameter Nameは何でも良いのですが、

今回は分かりやすくBaseColorとします。

f:id:MozPaca:20170816172549j:plain

 

これでマテリアルは完成です。

 

ブループリントを作成する

次にマテリアルを適応するMeshを持つ、

ブループリントを作成します。

 

コンテンツブラウザを右クリック→Blueprint Classを選択します。

f:id:MozPaca:20170816172756j:plain

 

今回のParent ClassはActorにしました。

f:id:MozPaca:20170816172839j:plain

 

こちらもマテリアル同様、適当な名前をつけます。

f:id:MozPaca:20170816172907j:plain

 

作成したブループリントをダブルクリックで開き、

Add ComponentからSphereを選択します。

f:id:MozPaca:20170816172936j:plain

 

こんな感じになると思います。

f:id:MozPaca:20170816173301j:plain

 

このSphereのマテリアルを先程作成した、

M_Randomに変更しましょう。

f:id:MozPaca:20170816173322j:plain

 

処理を書いていきます。

Construction Scriptタブを開き、このようにノードを繋げます。

f:id:MozPaca:20170816173427j:plain

SphereメッシュのElement Index 0のマテリアルを

Dynamic Material Instanceとして変数に格納します。

 

※マテリアルが複数ある場合はFor Loopと配列で

 全てのマテリアルを格納することも可能です。

 

次にイベントグラフタブを開き、

このようにノードを繋げます。

変数に格納したマテリアルの色をランダムに変更しています。

f:id:MozPaca:20170816173711j:plain

Set Vector Parameter ValueのParameter Nameには

マテリアルを作成したときにつけたVector Parameterの名前を入力してください。

 

Random Floatノードは0~1の値をランダムに返してくれるノードです。

 

もしEmissive Colorで1以上の値が欲しい場合には

Random Float in Rangeノードを使用すると良いと思います。

f:id:MozPaca:20170816174154j:plain

 

配置する

作成したブループリントをレベルに配置しましょう。

f:id:MozPaca:20170816174620j:plain

 

確認してみる

このように生成された瞬間に

ランダムに作成された色が適応されていると思います。

www.youtube.com

 

余談

同様の処理を使い、Event Begin PlayをEvent Tickに

変更してみました。

f:id:MozPaca:20170816174536j:plain

 

www.youtube.com