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

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

UE4 Widgetで使用しているマテリアルにエフェクトをつける

今回はWidget BlueprintsのRetainer Boxについて書いていきます。

f:id:MozPaca:20181108151952p:plain

 

検証には4.21.0を使用しています。

f:id:MozPaca:20181108134440p:plain

 

まずはWidget Blueprintsを作成します。

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

ユーザーインターフェースウィジェットブループリントを選択します。

f:id:MozPaca:20181108152300p:plain

 

名前をつけます。

f:id:MozPaca:20181108152401p:plain

 

作成したWidget Blueprintsを開いて

画像のようにものを配置します。

f:id:MozPaca:20181108152419p:plain

 

次にマテリアルを作成します。

右クリックからマテリアルを選択します。

f:id:MozPaca:20181108152502p:plain

 

名前をつけます。

f:id:MozPaca:20181108152547p:plain

 

Material DomainをUser Interfaceに設定します。

Widgetに配置したテクスチャにアルファがある場合は

Blend Modeも適したものに変更してください。

f:id:MozPaca:20181108152624p:plain

 

このように処理を組みます。

Texture Parameter 2Dもしくは

Texture Object Parameterに名前をつけます。

この名前は後で使用します。(今回はRetainerTextureとしました)

f:id:MozPaca:20181108152611p:plain

 

Widget Blueprintsの方に戻りRetainer Boxに

Effect MaterialとTextrue Parameterを設定します。

これは先程作成したマテリアルと

その中のTexture Parameterの名前ですね。

f:id:MozPaca:20181108153057p:plain

 

レベルブループリントを開きWidgetを描画する処理を書きます。

f:id:MozPaca:20181108154851p:plain

 

これでエフェクトをかける準備ができました。

 

先程作成したマテリアルの処理を変更しました。

f:id:MozPaca:20181108154959p:plain

 

この状態で実行してみるとこのようになります。

Widget内でRetainer Boxの子にしたものだけに

エフェクトがかかっていると思います。

www.youtube.com

 

注意事項としてRetainer Boxの処理は実行しないと

確認できません。

Widget Blueprints内のエディタではエフェクトなどの

確認は行えないので気をつけてください。

UE4 MaterialのFlipBookノードについて

今回はUE4標準のMaterial Function

「FlipBook」について書いていきます。

f:id:MozPaca:20181108134005p:plain

 

このノードはテクスチャアニメーションを

簡単に行うことができます。

 

Paper2DにもFlipBookコンポーネントがありますが、

そちらとは別物になりますので注意してください。

 

公式ドキュメントはこちら

Unreal Engine | フリップブック アニメーションをレンダリングする

 

FlipBookノードについて

引数

Animation Phase(0~1)

アニメーションの速度を設定します。

デフォルトにはTimeノードが

設定されています。

Number of Rows

テクスチャの行(横)の数です。

今回の場合は3ですね。

Number of Columns

テクスチャの列(縦)の数です。

こちらも今回は3です。

Texture

Resultピンを使用する場合は

テクスチャオブジェクトを接続する必要があります。

今回は使いません。

UVs

UVの指定を行えます。

MipBias/Level

テクスチャを鮮明にしたり、ぼかしたり出来ます。

Textureピンに接続されているもののみに影響を及ぼします。

Use Mip Bias(T)Level(F)

BiasとLevelの切り替え処理です。

True...バイアス , False...Levelになります。

デフォルトはTrueになっています。

Clamp Anim(see tooltip)

Trueにするとアニメーションフェーズにfrac演算が適応されます。

デフォルトはFlaseです。

 

返り値

Result

Textureピンで入力されたテクスチャ情報を返します。

Alpha

Textureピンで入力されたテクスチャのアルファ値を返します。

UVs

UVの値を返します。

 

 

検証にはUE4 4.21.0を使用しています。

f:id:MozPaca:20181108134440p:plain

 

準備

事前にこのような画像を用意しました。

エンジンの中にも似たような画像がありますが、

この画像を作ったあとに気づいたので

今回はこの画像を使用します。

f:id:MozPaca:20181108134604p:plain

 

新規に空のプロジェクトを作成します。

f:id:MozPaca:20181108134455p:plain

 

コンテンツブラウザに先程の画像をインポートします。

f:id:MozPaca:20181108134922p:plain

 

マテリアルを作成する

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

マテリアルを選択します。

f:id:MozPaca:20181108141511p:plain

 

名前をつけましょう。

f:id:MozPaca:20181108141554p:plain

 

作成したマテリアルを開き

Material DomainをUser Interafce、

Blend ModeをMaskedに変更します。

f:id:MozPaca:20181108141612p:plain

 

次にこのように処理を組みます。

Texture Sampleには先程インポートした画像を設定しています。

f:id:MozPaca:20181108141831p:plain

 

Widgetを作成する

マテリアルを組み終わったので

Widgetを作成します。

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

ユーザーインターフェースウィジェットブループリントを選択します。

f:id:MozPaca:20181108142526p:plain

 

名前をつけましょう。

f:id:MozPaca:20181108142901p:plain

 

Imageを配置します。

今回は表示したい領域が256のサイズなので、

サイズとImage Sizeを256に設定します。

f:id:MozPaca:20181108143926p:plain

 

先程作成したマテリアルをImageに適応します。

f:id:MozPaca:20181108144117p:plain

 

Widgetを描画する

作成したWidgetを描画していきます。

レベルブループリントを開きます。

f:id:MozPaca:20181108144318p:plain

 

Widgetを描画する処理を書きます。

f:id:MozPaca:20181108144346p:plain

 

確認してみる

 アニメーションしているのが確認できました。

www.youtube.com

 

GrayちゃんのUTAU音源を作りました その1

お、このブログとうとうUE4関係ないこと書き出したぞ。

Grayちゃん関連だから許してね。

 

f:id:MozPaca:20181105153934p:plain

 

先日GrayちゃんのUTAU音源を作りました。

一番苦労したところはreadmeを書くことでしょうか。

www.gray-chan.com

 

今回の記事は音源の紹介と
UTAUを使って調声していく流れを

ざっくり紹介していくものです。

私の個人的な設定なども紹介できればと思います。

 

UTAUとは所謂「人力ボーカロイド」のようなものです。
(ボーカロイドがわからない?あ、はい。)

 

GrayちゃんOFFICIAL WEBSITEの方にも載っていますが

このような歌声になります。

www.youtube.com下の方に音痴なGrayちゃんの動画がありますが、

きちんと調声すれば綺麗な声が出ます。 

ファイト!

 

GrayちゃんUTAU音源の概要

・当然ですがUTAUで使用する前提で作成しました。

・UTAUにおける一般的な単独音の音声ライブラリです。

・一応原音設定はしてますが、気に入らなければ
 oto.iniを作り直してください。

・連続音には対応してないので、うまいことやってください。

 

UTAUのダウンロードについて

UTAUはWindows向けに制作された

歌声合成ソフトフェアです。

下記のリンクからダウンロード出来ます。


UTAUのダウンロードをこちらから

歌声合成ツールUTAU サポートページ

 

フリーのソフトウェアですが、

シェアウェア版もあります。

機能に違いはありませんが、
開発中の機能が使えたりする特典があります。

カンパのお礼みたいなものです。

(個人的には見た目が変わるのが嬉しい)

 

UTAUのインストール

先程のリンクからUTAUをダウンロードすると

インストーラーが入っています。

そのインストーラーを起動します。

 

次へをクリックします。

f:id:MozPaca:20181105143510p:plain

 

インストールしたいパスを入力し次へをクリックします。

f:id:MozPaca:20181105143702p:plain

 

次へをクリックします。

f:id:MozPaca:20181105143733p:plain

 

インストール完了しました。

f:id:MozPaca:20181105143752p:plain

 

Grayちゃん音源をUTAUに導入する

UTAUのフォルダを開き、voiceフォルダの中に
ダウンロードしたGrayちゃんフォルダをそのまま入れるだけ。

これで導入完了です。

f:id:MozPaca:20181105143914p:plain

 

UTAUを起動する

utau.exeでUTAUを起動することが出来ます。

f:id:MozPaca:20181105143823p:plain

 

起動しました。

f:id:MozPaca:20181105151447p:plain

 

使い方

基本的な使い方などはググっていただければ、

腐るほど資料が出てくると思います。

 

プロジェクトを作成する

左上のファイルから新規のタブをクリックします。

f:id:MozPaca:20181105153214p:plain

 

プロジェクトの設定画面が開くので、

原音ファイルセットにGrayちゃんを選択して

OKボタンをクリックします。

使用したいツールがあれば、

ツール1/2で設定を行ってください。

f:id:MozPaca:20181105153316p:plain

 

 

あとは歌詞を音階に合わせて打ち込んでいけば終わりです。

f:id:MozPaca:20181105153427p:plain

 

プラグインについて

UTAUの機能は最低限のものにまとめられています。
細かい設定を行いたい場合はプラグインを入れる必要があります。

今回は私が個人的によく使っているプラグインで導入の手順を説明します。

 

こちらの方が作成されたアドオンを使用します。

bizzのブロマガ - ブロマガ

 

こちらのリンクからダウンロード出来ます。

ux.getuploader.com

 

ダウンロードして解凍したフォルダをUTAUのpluginsフォルダに入れます。

f:id:MozPaca:20181105152834p:plain

 

UTAUを起動し、ツール→プラグインの中に

導入したプラグインが表示されていると思います。

f:id:MozPaca:20181105152917p:plain

 

プラグインの導入終わり。

 

文字の一括変換。

単独音↔連続音の歌詞変換。

エンベローブ一括編集

などなど名前通り、大量の機能が入っています。強い。

 

他にもいろいろプラグインを導入していますが、
ほとんどが自作のためこれと言って紹介するものがありません。

自分にあうプラグインを探してみてください。

一括編集系のものがおすすめです。

 

「嗚呼、素晴らしきニャン生」を例にustを作ってみました。

GUMI : GrayちゃんUTAU音源

レン : UTAUのデフォルト音源

として作成しています。

 

ただただ音階に合わせて言葉を入力しました。

多少粗いですがまぁいいでしょう。

f:id:MozPaca:20181105164852p:plain

 

うわぁGrayちゃんめっちゃ歌ヘタ!

ハモリが悪い方に働いていますね。

www.youtube.com

 

あまりにもGrayちゃんの歌がアレだったので

エンベローブと音量調整をしました。

粗さが残ってますが気にしない。

(クオリティを高めたい場合は気にしてください)

f:id:MozPaca:20181105164941p:plain

 

Grayちゃんの音源の方はかなり聞き取りやすくなりました。

エンベローブの力ってすげー。

www.youtube.com

 

おおよそこんな感じでいけるんじゃないでしょうか?

予想外だったのがデフォルト音源は、

エンベローブをかけない方が綺麗だったことです。

元の音源が合成音声だからでしょうか?
このように音源ごとにいろいろ差があるので、

音源にあった調声をしましょう。


また保存する際はustファイルになります。
(wavの書き出しも出来ます)
このustファイルを配布している方もいるので、

そこからダウンロードして触ってみるのもいいと思います。

 

更新履歴

Ver 1.0 初版公開

・単独音のデータを作成。

・「いぇ」の収録依頼するの忘れてました。サーセン

 しばらくは「ね」とか「え」とかで代用してください。

 

余談

PVとかもね、きちんとGrayちゃんのモデルで
作った方がいいかなと思ったんだけどね。

そっちの方面には疎いから時間が...

収録してもらった音を自作エンジンに入れて、

音こねこねするだけの簡単なことしかできんのですよ。

すまんね。

 

なのでモデルとかアニメーションの方に詳しい人は

音源ダウンロードしてPVとか作ってもらえると嬉しいなぁ。

 

誰かやって!

UE4 動きのあるDissolveマテリアルを作成する

今回は下の画像のような揺らめくマテリアルを作成します。

f:id:MozPaca:20181015154414p:plain

 

作成にはUE4 4.20.3を使用しています。

f:id:MozPaca:20181015155524p:plain

 

マテリアルを作成する

まずはマテリアルを作成します。

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

f:id:MozPaca:20181015154451p:plain

 

名前をつけましょう。

f:id:MozPaca:20181015154540p:plain

 

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

マテリアルの処理を書いていきます。

 

今回のマテリアルの全体図です。

f:id:MozPaca:20181015154613p:plain

 

細かく見ていきましょう。

まずはマテリアルのBlend ModeをMaskedに変更しておきます。

オパシティマスクを使用するためです。

f:id:MozPaca:20181015154703p:plain

 

全体図の左の方から見ていきます。

処理の内容は画像のコメントを参照してください。

f:id:MozPaca:20181015154805p:plain

 

f:id:MozPaca:20181015154849p:plain

 

f:id:MozPaca:20181015154902p:plain

 

f:id:MozPaca:20181015154915p:plain

 

f:id:MozPaca:20181015154932p:plain

 

f:id:MozPaca:20181015154943p:plain

 

処理は以上です。

PannerなどのパラメータはInstanceで変更するので、

画像と同じようになっていれば、問題ありません。

 

マテリアルインスタンスを作成する

マテリアルの処理が書き終わったので、

次にマテリアルインスタンスを作成します。

マテリアルを右クリック→マテリアルインスタンスを作成を選択します。

f:id:MozPaca:20181015155241p:plain

 

名前をつけましょう。

f:id:MozPaca:20181015155338p:plain

 

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

パラメータを以下のように設定します。

f:id:MozPaca:20181015155358p:plain

 

これでマテリアルインスタンスでの設定は終わりです。

 

確認する

それっぽく動いていると思います。

www.youtube.com

 

余談

今回はBase ColorにVector Parameterをつなげていますが、
キャラクターなどにこのマテリアルを適応したい場合は、

マテリアルファンクションで作成するのが望ましいかと思います。

 

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

マテリアル・テクスチャ→マテリアル関数を選択します。

f:id:MozPaca:20181015160205p:plain

 

名前をつけます。

f:id:MozPaca:20181015160248p:plain

 

先程作成したマテリアルから必要な部分をコピーし貼り付けます。

f:id:MozPaca:20181015160301p:plain

 

マテリアルファンクションとして使用します。

f:id:MozPaca:20181015160336p:plain

 

終わり。

 

UE4 TargetPointを使用してワープ処理を実装する

TargetPointはスポーン座標の指定などでよく使用されるものです。

座標だけでなく、回転、スケールも取得することも可能です。

f:id:MozPaca:20180925170231p:plain

(このArrowって昔からついてたっけ?)

 

api.unrealengine.com

 

このTargetPointを使用してプレイヤーを

指定した座標、向きでワープさせる処理を実装したいと思います。

 

今回はUE4 4.20.3を使用します。

f:id:MozPaca:20180925170407p:plain

 

準備

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

なんとなくThirdPersonテンプレートで作成します。

f:id:MozPaca:20180925170534p:plain

 

作成しました。

f:id:MozPaca:20180925170617p:plain

 

TargetPointを配置する

モードタブからTargetPointをD&Dで配置します。

f:id:MozPaca:20180925171748p:plain

 

7つほど配置しました。

f:id:MozPaca:20180925171824p:plain

 

BPを編集する

ThirdPersonBP/Blueprintsの

ThirdPersonCharacterを開きます。

f:id:MozPaca:20180925171910p:plain

 

変数を2つ作成します。

f:id:MozPaca:20180925172005p:plain

TargetPoint

・TargetPoint型(配列)

インスタンス編集可能

CurrentTargetPoint

・Integer型

 

レベルに配置してあるThirdPersonCharacterを選択し、

TargetPoint変数に配置してあるTargetPointを割り当てます。

f:id:MozPaca:20180925172243p:plain

 

再びブループリントに戻り、

このような処理を組みます。

f:id:MozPaca:20180925172415p:plain

 

Pキーが押された際に現在の配列の長さと

別に保存している番号を比べます。

f:id:MozPaca:20180925172458p:plain

 

番号が配列の最大数より小さければ、次の要素へ。

大きければ0に戻します。

その後ワープ処理を書きます。

f:id:MozPaca:20180925172619p:plain

 

確認する

配列に指定した順番にワープしていると思います。

 

おまけ

 配列を手作業で指定したくない場合や、

ある程度TargetPointの使用方法が固定されている場合は、

BeginPlayにこのような処理を書くと色々楽です。

f:id:MozPaca:20180925173100p:plain

UE4 Materialで押しつぶすような処理を書く

以前UE4勉強会 in 大阪で登壇した際に似たようなことを

話しましたが、今回はもっとシンプルな仕組みで解説したいと思います。

(資料も公開されています)

ue4study-osaka.connpass.com

 

バージョンは4.20.2を使用しています。

f:id:MozPaca:20180827133137p:plain

 

早速やっていきましょう。

 

まず、右クリックからMaterial Functionを作成します。

f:id:MozPaca:20180910150026p:plain

 

処理はこのように書きます。

細かい説明はコメントを参照してください。

LerpのAlphaの値に合わせて潰していく処理になります。

f:id:MozPaca:20180910150116p:plain

 

作成したMaterial Functionが動くか確認するためのMaterialを作成します。

右クリックからMaterialを選択してください。

f:id:MozPaca:20180910150313p:plain

 

これ以上にないシンプルなMaterialを作成しました。

World Position Offsetには先程作成したMaterial Functionを繋いでいます。

f:id:MozPaca:20180910150420p:plain

 

Material Instanceにして確認しましょう。

f:id:MozPaca:20180910150538p:plain

 

Crushで潰し具合を設定して、

PivotLocationZでどの高さで潰すかを設定しています。

www.youtube.com

UE4 ネットワークで乱数を使う

UE4の乱数は各クライアントで処理が行われるため、

乱数が統一できません。

 

ランダムにMeshを切り替えるなどの処理を行いたい場合は、

乱数の結果が各クライアントで一致しなければ

見た目に不具合が出ます。

そういうときの対策を書いていきます。

 

サンプルとして、

ランダムにStaticMeshを切り替える処理を行います。

 

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

f:id:MozPaca:20180731150524p:plain

 

右クリックからブループリントクラスを選択します。

f:id:MozPaca:20180903172322p:plain

 

親クラスはCharacterを選択します。

Actorや、Pawnであっても問題ありません。

f:id:MozPaca:20180903172352p:plain

 

作成したBPを開きStaticMeshコンポーネントを追加します。

f:id:MozPaca:20180903172438p:plain

 

変数を1つ作成します。

StaticMesh型の変数です。中身は空で構いません。

f:id:MozPaca:20180903172731p:plain

 

カスタムイベントを作成します。

StaticMeshを切り替える処理です。

切り替える候補もここで決めています。

先程作成した変数はここで今のMeshと違うかどうかを判別するために

使用しています。

f:id:MozPaca:20180903173031p:plain

 

今回のメインです。

再現性のある乱数を生成します。

いわゆるシード的なアレです。

f:id:MozPaca:20180903173325p:plain

 

公式にも解説がありますし、

他の方のブログでも見かけたので解説は端折ります。

api.unrealengine.com

 

サーバーとクライアントで処理を分け、

先程のカスタムイベントを呼び出します。

f:id:MozPaca:20180903173546p:plain

 

左クリックでMeshを切り替えるようにしました。

f:id:MozPaca:20180903173641p:plain

 

切り替わりました。

f:id:MozPaca:20180903173952p:plain