🌥もこも制作日記🌥

創作に関することを書いていきます。だいたいゲーム系

【UE4.20.3】ラスタースクロールマテリアルを作成/解説の回

はじめに

ラスタースクロールマテリアルの作り方を書きます。 テリーのワンダーランドでよく見ていた表現を試しに作ってみました。

結果

www.youtube.com

作り方

全体のノード

f:id:sim-mokomo:20181021220612p:plain

流れ

  1. 縦方向に波打つSin波を作成する。
  2. 1.の sin波を UV座標の横方向に対して加算してゆがみを作成する。
  3. sin波の調整パラメータを作成する。

1. 縦方向に波打つSin波を作成する。

f:id:sim-mokomo:20181021222122p:plain

縦方向に波打つ Sin波を作成したいので UV座標の縦方向成分を取り出してSin波のパラメータとして使用することで縦方向のSin波を実現させることができます。

これは後で画面をゆがませるために使用します。

2. 1のsin波を UV座標の横方向に対して加算してゆがみを作成する。

f:id:sim-mokomo:20181021222149p:plain

1で作成した縦方向のSin波を画面描画のUV座標の横方向に適用させることで描画を横に歪ませることができます。

3 sin波の調整パラメータを作成する。

f:id:sim-mokomo:20181021222122p:plain

Sin波は出力に乗算を用い、 -1~1 の値を変更させることで並みの振れ幅を大きくも小さくもできます。 調整パラメータ DestritionIntensity がこの役割を持っています。

またSin波は入力パラメータを増減させることで並みの周波数を変えることができます。つまり細かく揺らしたり大雑把に揺らすことができるということです。

これは DestritionIntensityに比例させて値を渡しています。 調整パラメータの数が1つのほうが個人的に使いやすいのでこうしましたが、周波数調整用のパラメータを用意してもいいと思います。

終わりに

前回の記事で質問があった場合には @sim_mokomo までと言いましたが記事内のコメントで質問していただいたほうが後に閲覧する人たちにとって見返しやすいとおもったので記事内のコメントで質問等はお願いします。

UnrealEngine4マテリアルデザイン入門 第2版

UnrealEngine4マテリアルデザイン入門 第2版

【UE4.20.3】ディゾルブマテリアルを作る

はじめに

めらめらマテリアルの作り方を書きます。 割と汎用的な表現方法なので是非使ってみてください。

例: 魔法陣のオーラ、マス目から湧き上がるオーラ,バリア,侵入不可能のエリア表現

結果

www.youtube.com

作り方

全体のノード

f:id:sim-mokomo:20181018234529p:plain

流れ

  1. ベース部分を用意します
  2. ベースの上部をノイズで削り取るための要素を用意
  3. (1 - 2)を行うことでベース部分の上部を削り取る

1. ベース部分を用意します

f:id:sim-mokomo:20181019000510p:plain

これはUV座標を表した絵です。Uが横,Vが縦に向かって 0 ~ 1 までの値を持っています。 f:id:sim-mokomo:20181019112751p:plain 今回は下から上に値が上昇するような要素が欲しいので、UV座標のV成分を Component Mask を使用して抽出します。

その後 0 ~ 1 までの値を減算させることでその値より下の部分は0を下回ります。画像では 0.4を与えているので丁度> 半分より上辺りから0未満となっています。

その後残りの0より上の部分に対して乗算を行うことで値をシャープにします。

これでベース部分は完成です!

2.ベースの上部をノイズで削り取るための要素を用意

f:id:sim-mokomo:20181019001526p:plain

下段はただのノイズテクスチャの設定を行っているだけです。ノイズテクスチャ自体はデフォルトで用意されているのでそちらを利用してください、Pannerを用いてテクスチャをAnimationさせています、さらにUV座標に乗算を行うことでノイズの大きさを調整できるようにしています。

上段はベース部分と一部被るような要素を作ります。これをベースに対して減算をすることでめらめらマテリアルを実現させます。なので被る要素に対してノイズ乗算を行います。

3. (1 - 2)を行うことでベース部分の上部を削り取る

f:id:sim-mokomo:20181019001627p:plain

(1 -2)の減算を行うことでベース部分からノイズ状に上部が切り取られ、めらめらマテリアル完成です!

おまけ

筒状の箱に対してこのマテリアルを適用させることで動画のような見た目を表現することができます。 他にもいろいろなメッシュを作成して適用させてみても面白いと思います。

f:id:sim-mokomo:20181019012413p:plain f:id:sim-mokomo:20181019012417p:plain

終わりに

質問は @sim_mokomo までお願いします

マテリアルノードに関する知識は以下の書籍を読むと理解が深まると思います

UnrealEngine4マテリアルデザイン入門 第2版

UnrealEngine4マテリアルデザイン入門 第2版

【UE4.20.3】UEC++エラー修正【不完全型のクラス】

不完全クラス型エラーとは

UEC++に限った話ではないかと思いますがエラー修正の備忘録です

不完全型クラスへのポインターは使用できません。

不完全型クラスとは宣言がされていないクラスのことです。

不完全型クラスの状態では以下の事ができません。

  • そのクラス型の変数の宣言
  • そのクラス型が持つ関数の参照/呼び出し
  • そのクラス型が持つ変数の参照

画像では UStatic Mesh Component が 不完全型クラスにも関わらずOnComponentHitを参照しようとしているためエラーが出ています。

f:id:sim-mokomo:20181011192050p:plain

修正方法

完全クラス型にしてあげることでエラーを修正できます。 具体的にはそのクラスが宣言されているヘッダーファイルをincludeする事で解決できます。

クラスの上にマウスカーソルを置き F12 キーを押すことでクラスが宣言されているヘッダーファイルの場所が分かります。

f:id:sim-mokomo:20181011195753p:plain

ヘッダーファイルの置き場所が分かったので以下のようにすることで読み込むことができ、完全型クラスにすることができます!

#include "Components/StaticMeshComponent.h"

C++でつくるUnreal Engineアプリ開発 for Windows & macOS 〜初歩からプラグイン開発まで〜

C++でつくるUnreal Engineアプリ開発 for Windows & macOS 〜初歩からプラグイン開発まで〜

【UE4.20.3】OnlineSubSystemSteamを導入してみた

はじめに

LAN環境におけるネットワークゲームができたので次はWAN環境上でネットワークゲームを作ろうとした。 そのための環境構築の回

環境

  • Windows10
  • UnrealEngine4.20.3

注意

色々いじくりまわしながら設定したので間違っている箇所がある可能性があります。

OnlineSubSystem とは

特定のプラットフォーム上で実行されるオンライン機能を抽象化を行うシステム。 これまではOnlineSubSystemNullと呼ばれるLAN環境のみを対象としていたOnlineSubSystemを使用していた。 今回は導入の資料が豊富に存在していたOnlineSubSystemSteamを利用する。Steamがマスターサーバのような役割をしてくれるのでWAN環境のネットワークゲームが構築できるらしい。

導入方法

基本的には公式が公開している導入方法を参考に環境構築ができます。 api.unrealengine.com

ざっくりとした流れ

  1. SteamworkSDKをインストールして指定のフォルダに格納する。
  2. プロジェクトファイルのDefaultEngine.iniに設定を書き込む。

導入時注意点

最新のSDK1.42を設定しようと思いましたが、実際に動かそうとした際にログにv1.39フォルダが見つかりませんといった旨のメッセージが出現し、うまく動きませんでした。設定した後にソースからビルドをする必要があるのかもしれない。沼りそうだったので大人しくSDK1.39を使用しました。

公式に張られたリンクから素直にSteamworkSDKをダウンロードしようとすると最新のSDKしか入手できません。SDK version 1.39 を使用する場合には以下のリンクから過去のversionのSDKが入手できます。

Steamworks

またWindowsではいくつかのDLLは以下のフォルダに格納されているのでこちらからコピーして公式の記事中で示されているパスに貼り付けてください。

C:\Program Files (x86)\Steam

おわりに

導入が無事成功すると EditorでStandAlone形式で起動させた際に右下にSteamのポップが表示されます。 f:id:sim-mokomo:20180927062715p:plain

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト

UE4.20.3でブラウン管ポストエフェクトを作るの巻

はじめに

前回は「RGBずらし」のPostProcessEffectを作成したのでこれをベースに用いてブラウン管PostProcessEffectを作成してみました。 sim-mokomo.hatenablog.com

結果

結果は動画で見てください。

www.youtube.com

作りかた

全体のノード

f:id:sim-mokomo:20180926192236p:plain

流れ

  1. 細かい横線を描くノードを組む
  2. 縦線にノイズをマスクさせて粗くする。
  3. 大き目の横線を描くノードを組む
  4. 2と3を結合させて描画をマスクさせる。

1. 細かい縦線を描くノードを組む

f:id:sim-mokomo:20180926192640p:plain

f:id:sim-mokomo:20180926205846p:plain

縦線を作りたいので、ここではSin波を使用します。どれだけ大きな値を入れてもSin波は形がループするので繰り返しの表現をしたい時に役立ちます。UV座標をそのまま使用すると横幅の範囲は0~1なのでSin波による縦線は1つしか作れません。なのでUV座標に大きい値を掛け合わせることでSin波の繰り返しを表現しています。

f:id:sim-mokomo:20180926210041p:plain

そのままSin波をしようすると縦線の間がグラデーションが効きすぎてしまいます。なのでSmoothStep関数を使用することでグラデーションを抑えています。

f:id:sim-mokomo:20180926210011p:plain

SmoothStep関数を使用すると上の図のようになるます。これで縦線の描画は終わりです。

2. 縦線にノイズをマスクさせて粗くする。

f:id:sim-mokomo:20180926194906p:plain

1.のままだと線が綺麗すぎてブラウン管っぽくないのでノイズテクスチャを噛ませて粗い線にしてます。 Pannerを使う事でノイズテクスチャに動きを持たせることができます。

3. 大き目の横線を描くノードを組む

f:id:sim-mokomo:20180926195453p:plain

理論的には1と同じ、ただし今回はブラウン管によくある上から流れてくるノイズを表現したいので1ほどは細かく描画を行わない。

4. 2と3を結合させて描画をマスクさせる。

f:id:sim-mokomo:20180926195509p:plain

描画結果と合わせます。完成した後は前回作成したRGBずらしのPostProcessEffectと同時に使用することでブラウン管のような表現が可能になります。

パラメータ

f:id:sim-mokomo:20180926200232p:plain

動画のような描画をする際に設定したパラメータです。

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト

UE4でネットワークPONG作成備忘録② バーの作成

はじめに

前回の続き。 今回はバーの作成を行います。ここにきてネットワークゲームで大切な概念である同期処理が出てくるので混乱しがちですか手元で試して色々いじってみてください。基本的にブログにはざっくりとした解説を書いて詳細は動画でお見せするスタイルでいきますのでご容赦ください 完成リポジトリは下に置いておきます。

github.com

作り方

動画

詳細は動画を見てください。

まだ作成してないです

全体の流れ

  1. Game画面のセットアップ。
  2. ポーン生成後、各プレイヤーを指定の位置に合わせる。
  3. バーの移動制御ノードを書く。

1. Game画面のセットアップ

f:id:sim-mokomo:20180924224520p:plain

StarterContentのFloorを使ってステージを作りました、PlayerStartの位置はのちのホスト、クライアントのバーの位置になります。

2. ポーン生成後、各プレイヤーを指定の位置に合わせる。

f:id:sim-mokomo:20180924222352p:plain

基底クラスが「GameMode」のBPを作成します。以下の処理はこのBPに書き込みます。

どのPlayerStartから生成されるのかわからないので同じ個所からアクタが生成される可能性もあります(指定できる方法があったら教えてください)、なのでプレイヤーが生成された直後に指定の位置を設定してあげます。 クライアントかホストなのかを判別するために is local player controller を使用することで求まります。 Get Player Start Trans は自作のノードです。中身はタグを見て特定のPlayerStartのTransformを取得するだけです。

3.バー移動制御のノードを書く

f:id:sim-mokomo:20180924222232p:plain

バーBPを作成します。基底クラスは「Actor」です。以下の処理はこのBPに書き込みます。ここから同期処理が出てきます。

レプリケート(複製)が出てきます、その前に図で同期をざっくり説明します。 f:id:sim-mokomo:20180925001849p:plain f:id:sim-mokomo:20180925001950p:plain f:id:sim-mokomo:20180925002010p:plain それではノードの解説に入ります。

移動方向を格納する Velocity変数 をレプリケートする設定で作る。これでサーバ側で変数の値を変えることで全クライアントにその変更が適用されることができる。

f:id:sim-mokomo:20180924232325p:plain

クライアント側で操作をバーを動かす操作をしたときにその変更をサーバ側に伝えたいので OnServer の設定でイベントを実行させる。この設定をすることでイベントをサーバに送信/実行することができる、なので変数のレプリケートを全クライアントに行うことができる。

Movement イベントは レプリケートされた変数を利用して実際に移動を行う。これはサーバに送信する必要はなく各自で実行させればいいのでレプリケートしない。

おわりに

これでMenuレベルから実行させれば動作すると思います。画像は完成品ですが以下のようにバーが二つ生成されます。

f:id:sim-mokomo:20180924235039p:plain

次回: ボールを作成する。

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト

UE4でRGBずらしPostProcessMaterialを作る

はじめに

Twitterで手軽に見た目をよくする加工の代表例として「RGBずらし」があったので作成してみました。 (他にはブルームとかがありました)

作った後に気づいたんですけど 公式サンプルにRGBずらしがありましたね。

RGBずらしとは

私たちが見ている画面はRGBと言われる光の三原色を組み合わされて描画されています。 このRGBをそれぞれの要素ごとに異なる方向ににずらすことでできるエモい表現を RGBずらしといいます。(記事を書いた後に気づきました、色収差って呼ばれているんですね。)

なぜいい感じに見えるのか言語化したかったですができませんでした、なのでエモいという表現を 使わせていただきます。

結果

結果は動画で見てください。

www.youtube.com

通常の描画との比較がなく、わかりにくかったので極端にRGBずらし効果を載せた画像を載せておきます。

f:id:sim-mokomo:20180924045937p:plain

作り方

全体のノード

f:id:sim-mokomo:20180924041251p:plain

流れ

  1. Material を PostProcess用に設定
  2. RGBごとに画面の描画を分解
  3. RGBそれぞれのUVをずらし、画面描画をずらす。
  4. PostProcessVolumeに作成したPostProcessマテリアルを設定

1. Material を PostProcess用に設定

f:id:sim-mokomo:20180924043548p:plain

PostProcess用のマテリアルを作成するときは Material Domain を PostProcess にする必要があります。

2.RGBごとに画面の描画を分解

f:id:sim-mokomo:20180924041254p:plain

f:id:sim-mokomo:20180924044405p:plain

ComponentMaskを使うことで要素の抽出を行うことができます。これを使い画面描画をRGBごとに分けることができます。画面描画は SceneTexture で取得することができますが参照するテクスチャ選ぶ Scene Texture id を PostProcessInput に変更する必要があります。

3.RGBそれぞれのUVをずらし、画面描画をずらす。

f:id:sim-mokomo:20180924041255p:plain

OffsetHogeパラメータを使い、画面描画のRGBごとにUVをずらします。UVに従って描画されている画面描画をこれでずらすことができます。

4. PostProcessVolumeに作成したPostProcessマテリアルを設定

f:id:sim-mokomo:20180924043749p:plain

パラメータ

f:id:sim-mokomo:20180924043332p:plain

動画で設定したパラメータです。このくらいが丁度良いのではないかと思います。

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト