みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

よいお年を

ついに大晦日ですねぇ。このブログもペースは落ちてますが、なんとかマル2年続けることができました。これも多くの方に読んでいただいているのが、励みになっています。ありがたや、ありがたや。

2年も経つとエンジンのバージョンも随分アップデートされてきました。そろそろ過去記事をメンテした方がいいかもしれないなぁ と思うんだけど、それよりも新しい記事書かないと、という想いがその思いを押しやってしまって結局のところネタを思いつかなくて筆が重くなるという、よくわからない悪循環のような状態になっている今日この頃です。大晦日ということで、小ネタを載せて2017年を締めようかと思います。

 

マテリアルで絵を揺らします。パラメータで制御できるので、いい感じにアニメーションさせればそれなりに使い途はある・・・と思いたい。

f:id:hiyokosabrey:20171231203820p:plain

制御用パラメータは3つ。

  • Period ・・・波の数
  • Amplitude ・・・ 左右の振れ幅  0でまっすぐ
  • OffsetY ・・・ タテ方向のスクロール用

 

真ん中のシマシマのテクスチャは、こんなやつ。

f:id:hiyokosabrey:20171231204249p:plain

8 x 512px のグレイスケールテクスチャです。

あとは、タイムラインからパラメータ用の数値を取り出して、横流しをしてやればOK。

アニメーションを再生して、

f:id:hiyokosabrey:20171231205515p:plain

 

EventTick で取り出して横流しです。

f:id:hiyokosabrey:20171231205555p:plain

この例では、最初からある キャンバスパネル の Pivot は演出に使わないので、Pivot にアニメーションを仕込んでいます。Pivotは XとYの2つしか値を持っていないので、 OffsetYとして 0.5を掛け算して 再利用しています。

 

アニメーションを再生するカスタムイベントが呼ばれると動きます。

f:id:hiyokosabrey:20171231210729p:plain

f:id:hiyokosabrey:20171231210739p:plain

f:id:hiyokosabrey:20171231210747p:plain

うにょ~んと動くので、なかなか楽しいです。

動画でお見せできないのが残念ですが、興味を持っていただけたならぜひ試してみてください。

どこで使うんだろうというネタですが、これで今年は締めさせていただこうと思います。

 

ではでは

来年もよろしくお願いいたします。 

ステキなUE4ライフを!

 

よいお年を

ついに大晦日ですねぇ。このブログもペースは落ちてますが、なんとかマル2年続けることができました。これも多くの方に読んでいただいているのが、励みになっています。ありがたや、ありがたや。

2年も経つとエンジンのバージョンも随分アップデートされてきました。そろそろ過去記事をメンテした方がいいかもしれないなぁ と思うんだけど、それよりも新しい記事書かないと、という想いがその思いを押しやってしまって結局のところネタを思いつかなくて筆が重くなるという、よくわからない悪循環のような状態になっている今日この頃です。大晦日ということで、小ネタを載せて2017年を締めようかと思います。

 

マテリアルで絵を揺らします。パラメータで制御できるので、いい感じにアニメーションさせればそれなりに使い途はある・・・と思いたい。

f:id:hiyokosabrey:20171231203820p:plain

制御用パラメータは3つ。

  • Period ・・・波の数
  • Amplitude ・・・ 左右の振れ幅  0でまっすぐ
  • OffsetY ・・・ タテ方向のスクロール用

 

真ん中のシマシマのテクスチャは、こんなやつ。

f:id:hiyokosabrey:20171231204249p:plain

8 x 512px のグレイスケールテクスチャです。

あとは、タイムラインからパラメータ用の数値を取り出して、横流しをしてやればOK。

アニメーションを再生して、

f:id:hiyokosabrey:20171231205515p:plain

 

EventTick で取り出して横流しです。

f:id:hiyokosabrey:20171231205555p:plain

この例では、最初からある キャンバスパネル の Pivot は演出に使わないので、Pivot にアニメーションを仕込んでいます。Pivotは XとYの2つしか値を持っていないので、 OffsetYとして 0.5を掛け算して 再利用しています。

 

アニメーションを再生するカスタムイベントが呼ばれると動きます。

f:id:hiyokosabrey:20171231210729p:plain

f:id:hiyokosabrey:20171231210739p:plain

f:id:hiyokosabrey:20171231210747p:plain

うにょ~んと動くので、なかなか楽しいです。

動画でお見せできないのが残念ですが、興味を持っていただけたならぜひ試してみてください。

どこで使うんだろうというネタですが、これで今年は締めさせていただこうと思います。

 

ではでは

来年もよろしくお願いいたします。 

ステキなUE4ライフを!

 

マテリアルで電光掲示板を作ってみる

オモムロに電光掲示板(流れるやつ)を再現してみたくなって試してみたら、なかなかいい感じになったのでメモっておくことにします。

f:id:hiyokosabrey:20171215214252p:plain

 

たまにゲームで見かけるのが、ドット風のテクスチャでマスクされて、UVスクロールしているやつ。穴のたくさん開いた板の向こうを看板が滑っているようにみえるので残念な気持ちになることがあります。まぁこんなところが気になるのは職業病ですね。

 

・・・

 

 まずテクスチャを用意します。

 

f:id:hiyokosabrey:20171214231224p:plain   ←256x16 px

 

フォントはアンチエイリアスを無しにします。Photoshopの書式設定は以下のとおり。

f:id:hiyokosabrey:20171214231500p:plain

 

UE4のインポート設定は GrayScaleにします。ここで重要なのがフィルター設定。

f:id:hiyokosabrey:20171214231748p:plain

 拡大表示してもドットがボヤけないように、Nearest にしておきます。

 

できたテクスチャを使ってマテリアルを用意していきます。

f:id:hiyokosabrey:20171215200359p:plain

 テクスチャの一部を切り出す(トリミング)ので、TexCoordinateノードのタイリング設定は以下。

  • UTiling: 0.25
  • VTiling: 1.0

これで256x16のテクスチャの内、 64x16 (タテヨコ比 4:1)の部分が目に見えることになります。

Add ノードで値を追加すると、UV値が移動します。そこで移動用の仕組みが以下。

f:id:hiyokosabrey:20171215202244p:plain

Time ノードは、Period という設定値を持っていて、値を設定しておけばその値までカウントしたらまた 0 に戻って・・・を繰り返します。ここではテクスチャサイズを入れておけばいいのですが、カウントアップの速度がそのままスクロールスピードになるので、いったん 1/10 した値を入れておきます。すると、 0.0 → 25.6 でループします。

そしてその値を 10倍することで、 0.0 → 256.0 にできます。

このあとの Floor ノードの手前で 0.0 ~ 256.0 という値になっていれば問題ありません。

さらにスピードアップするなら、 Period = 2.56 で 100倍すればOK。

この状態で見た目にそれっぽくなります。

下はWidgetのキャンバスに Image パーツを置いてマテリアルをセットした状態。

f:id:hiyokosabrey:20171215203515p:plain

パーツのサイズは 1024x256 です。 テクスチャのフィルタ設定を Nearest にするとピクセルがボケずにそのまま拡大されるのが分かると思います。

 

もう少し雰囲気を出していきましょう。

タイリング用のマスクテクスチャを用意します。

 

f:id:hiyokosabrey:20171215203905p:plain  ← 16 x 16 px

 

これをインポートして、先ほどのマテリアルに持ってきます。

f:id:hiyokosabrey:20171215204144p:plain

Multiply で掛けるのですが、そのままだと、↓こうなるので・・・

f:id:hiyokosabrey:20171215204345p:plain

TexCoord先生にタイリングをお願いします。

  • UTiling: 64
  • VTiling: 16

Tilingの値は、1.0以上の場合は、言葉の通り繰り返し回数なのでイメージしやすいですね。

f:id:hiyokosabrey:20171215204714p:plain

いかがでしょうか?かなりいい感じになったと思います。

 

今回のマテリアルはWidget専用というわけではないので、いろいろ応用できます。 

せっかくなので、マテリアルドメインを通常の Surface にしてシリンダーに貼ってみました。

(文字テクスチャの部分切り出しは無しにしています)

Emissiveの値を強めておいて、ポストプロセスでBloomを有効にすると雰囲気アップです。

f:id:hiyokosabrey:20171215211616p:plain

 

 

 

マスクテクスチャのデザインを変えると、ちょっと雰囲気を変えることができます。

f:id:hiyokosabrey:20171215210442p:plain ← LED風

f:id:hiyokosabrey:20171215210504p:plain←ブラウン管風

この色付きのマスクの場合、文字のカラーを変えるといい感じになるのでオススメです。

でちょっと遊んでみたのが冒頭のやつです。

f:id:hiyokosabrey:20171215214252p:plain

かなり雰囲気が出せました。

 

 

タイリングの回数が多くて処理が・・・となるのであれば、マスクテクスチャをあらかじめいくつかタイリングした状態にすれば、回数を減らすことができます。

テクスチャの容量は増えますが、描画の負荷は減ります。

f:id:hiyokosabrey:20171215212135p:plain ← 32 x 32 px

  • UTiling: 64  → 32
  • VTiling: 16  → 8

 

 

今回はこの辺で。

ではではステキな電光掲示板ライフを!

 

 

2枚の絵をマスクで切り替え

このブログもそろそろ2年目を迎えます。よく続いたもんです。さすがにネタに困ってきてる気がしないではない・・・というかちょっと困ってます。

朝、駅のホームで突然ひらめいたりしますが、地下鉄の駅から地上に出たところでスッカリ忘れていたりするので、もうどうしたものか・・・。

 

さてさて

そんな ネタ貧困生活のなかでようやく思いついたのがマスクテクスチャを使った絵の切り替え。どこらへんに需要があるか分かりませんが、工夫次第で面白い表現が出せそうです。

 f:id:hiyokosabrey:20171206041405j:plain

 

ではまず

マスクテクスチャを作ります

解像度はかなり小さく作ります。

40x23 px  ↓これは400%に拡大した状態

f:id:hiyokosabrey:20171205212853p:plain

ノイズを乗せます。このときヒストグラムが確認できるのであれば、確認しながら掛けるといいと思います。なるべく両サイドの分布が少なくなるようにする方がいい感じになります。

f:id:hiyokosabrey:20171205213144p:plain

仕上げにトーンカーブで(0,0,0)と(255,255,255)を無くします。

試せばわかるのですが、無くしておかないと、マスクで使う際に完全な白と黒にならないからです。

f:id:hiyokosabrey:20171205223420p:plain

 このトーンカーブは調整レイヤーで作業すると使い回しができて便利です。

 

 

このテクスチャをUE4にインポートします。

 Grayscale で sRGB を使わない設定にします。

最後に大事なのが、Filter設定。これを、Nearest にしておきます。

f:id:hiyokosabrey:20171205224059p:plain

 

あとは適当な絵を2枚用意してマテリアルを作ります。

f:id:hiyokosabrey:20171205231157p:plain

 ValueStep ノードはPhotoshopでいうところの『2階調化』っていうやつです。

Gradientのピンにグレイスケールの絵を流して、Mask Offset Value のピンで閾値を加減します。

 

これを、Widgetで確認します。

このマテリアルをキャンバスのImageパーツにセットします。

グラフに置いてある Event Pre Construct で ダイナミックマテリアル化しておきます。

f:id:hiyokosabrey:20171205232009p:plain

 

アニメーションのために、隠しパーツをキャンバスに一つ置いておきます。

 この辺の操作は過去記事でもやってたので一応貼っておきます。

limesode.hatenablog.com

このパーツの Pivot あたりにアニメーションを付けます。値は 1.0 → 0.0  になるようにします。

もちろん非表示なので、 Visibility は Collapse にしておきます。

全開の記事では Hidden にしていましたけど、Hidden よりも Collapse の方が処理がかからないそうです。

 

あとはこの隠しパーツ(今回 Invisibleと名付けました)の値を拾って、ダイナミックマテリアルに渡すようにしておいて、

f:id:hiyokosabrey:20171206033128p:plain

アニメーションを再生すればOK。

再生用のイベントを用意しました。

f:id:hiyokosabrey:20171206034225p:plain

 

レベルブループリントで確認用の CreateWidget → Add to Viewport をつなぎます。

そして、Input ~ で再生用のイベントを呼び出せば簡単に確認できます。

f:id:hiyokosabrey:20171206035050p:plain

繰り返し確認するために、リセットするイベントを用意しました。

f:id:hiyokosabrey:20171206035318p:plain

 

では再生してみると・・・

f:id:hiyokosabrey:20171206041024g:plain

(実際はもっと速いのですがGIFの再生速度が限界っぽい)

 

再生速度はタイムラインで調整できます。

ポストプロセスマテリアルに応用すると、画面遷移として使えそうです。

マスクテクスチャをグレイスケールで作れば、StepValue で段階的なアニメーション表現ができるので楽しいです。

今回はデジタルノイズっぽくランダムにしたかったのと、テクスチャを安く作りたかったので、普段あんまり使わないNearestを使ってみました。

 

こんなやつだと

f:id:hiyokosabrey:20171206044958p:plain  64x64px をマテリアルでタイリングしました。

f:id:hiyokosabrey:20171206045323j:plain

同じサイズで円形のグラデーションにすると

f:id:hiyokosabrey:20171206045926p:plain

f:id:hiyokosabrey:20171206045948j:plain

 

階調を反転すると、また違った見え方になります。

 

 

ではでは今回はこの辺で。

ステキな画像切り替えライフを!

UMGの移動アニメーションを作る場合

UMGで移動アニメーションを作る場合、PositionTranslation の2種類があって、表示された見た目には違いがないように感じますが、それぞれ仕様が違うので私は使い分けて使っています。

今回はその使い分けについての私なりの解釈をぐだーと書いてみます。

 

下図は、UMGのキャンバスに置いたImageパーツのDetails(詳細)タブ。

f:id:hiyokosabrey:20171103113340j:plain

まず先に書いてしまうと、

  • Position は レイアウト用
  • Translation はアニメーション用

として捉えています。

実際に使ってみると判るのですが、ポイントは座標の扱い方が違うという点です。

Position は Anchor を基準としたキャンバスパネル内の絶対位置である「居場所」を指定します。一方 Translation は今いる場所からの プラスマイナスした位置という「移動量」を指定します。コトバの意味としても、辞書を見ると translate には「場所」をイメージさせるような訳がなく「翻訳」の他に「変形」という和訳がありました。

カテゴリも Render Transform ですしね。

なので、覚え方としては、

  • Position で指定した場所から Translation で指定した分だけ変形

となります。

「移動」と書かずにあえて「変形」と書いたのは、UMGでは移動も変形として扱っているからです。

3Dモデルで考えると解りやすいのですが、まずモデルには中心(Center)があって、そこから離れた位置に各頂点(Vertex)があります。この各頂点はモデルの中心からの相対位置でデータ化されています。Transform は形状を変形させることになり、変形することは頂点が移動することを意味します。例として頂点4個の四角いメッシュでイメージ図を作ってみました。

f:id:hiyokosabrey:20171103144901p:plain

f:id:hiyokosabrey:20171103144913p:plain

 UMGやFlashのような2DベースのGUI制作に慣れ親しんでいると、この「頂点」があるというイメージは感覚的に身に付けるのは難しいかもしれませんね。

 

ちなみに

キャンバス内でレイアウトを触っていると、値が変化するのは、Position の方で、Translation は、0.0 のままです。

 

 

ブループリントで位置を触る場合

位置を変えることができるノードは2つあります。

Position の方は Canvas Slot 型に キャストしてやる必要があります。

 

f:id:hiyokosabrey:20171103115727p:plain

Image_22 というのはUMGでテキトーに置いたImageパーツです。

 

変数には Canvas Panel Slot型というのがあるので、ブループリント内で繰り返しPosition を触る場合は、変数化しておくと便利です。

f:id:hiyokosabrey:20171103142255p:plain

 

で、結局のところ・・・

移動アニメーションは基本的に Translation で行うと扱いがラクになります。

UMGのキャンバスでのレイアウトの変更や調整がやりやすいからです。

 

例えばフレームインしてくるアニメーションの場合、まず最終表示位置にパーツを並べて位置を決定します。そのあとで、Translation でそこから表示開始位置まで移動するのをアニメーションキーで登録します。この時の値は、いくらか離れた位置を開始位置にして、終了位置は必ず 0.0 になります。開始位置のキーは、単に移動量を表わすことになりとてもシンプルです。

 

後で、レイアウト上の問題が発生してこの最終表示位置をキャンバス内で修正したとしても、調整レベルであればアニメーションキーの修正は必要ありません。これが結構メリットになります。

 

座標の扱いについてまとめると

  • Position は キャンバスに対しての 絶対座標
  • Translation相対座標 または Position からの オフセット位置

ということになります。

 

UMGのAnimationでは Translation で動きをつけ、ブループリント では Position を使って配置する、といった使い方が便利でよく使う手です。

 

 

 今回は以上です

 Position と Translation の使い分けで、迷っておられる方があれば、ぜひ参考になればうれしいです。

 

ではでは ステキな移動アニメーションライフを!

 

 

UMGのテキストを動かしてみる

UMGでテキストを表示します。キレイにアウトラインフォントが表示されます。

うん。

・・・・。

そう、ちょっと刺激が足りないなと、気づいたのです。

このままで終わっていいのか?テキストブロック!

お前の人生、ただ指示された通りの文字を並べるだけでいいのかよ!

と、中学校の文化祭に行って観劇してたら急にそんな気分になったのでした。

で、

テキストの文字を1文字ずつアニメーションさせてみようと思って遊んでみました。

 

テキトーにWidgetブループリントを用意します。

さっそくキャンバスに、Horizontal Box をひとつ。is Variable のチェックを忘れずに。

f:id:hiyokosabrey:20171020213815p:plain

あと、Size to Content にもチェックを付けます。

で、

ブループリント。

 

まず変数を3つ新しく用意します。

f:id:hiyokosabrey:20171020213710p:plain

上から、

Boolean型の変数は、準備できるまで、 Event Tickに我慢させるためのフラグ。

TextBlock型の配列変数は、文字をバラバラに管理するため。

Float型の変数は、サインカーブのための角度を保持するため。

 

変数が用意できたら、続けて関数を一つ。

関数にも、ローカル変数を3つ。これは関数内だけで利用される変数。

f:id:hiyokosabrey:20171020221553p:plain

上から、

String型の変数は、パラメータとして受け取った文字列を保持しておくため。

Slate Font Info型の変数は、フォントの設定を保持させておくため。

Integer型の変数は、受け取った文字列の長さを保持しておくため。

 

ちょっと画像が大きくなったので、左右で2枚になりました。

f:id:hiyokosabrey:20171020222152p:plain

文字列の長さを、 Lengthノードで調べると、単純に文字の数を調べてくれます。

例えば、"0123456789" のように数字が並んでいる場合、文字の数は10個です。

ForLoop ノードでは、繰り返しの回数を指定する場合に、Index番号という数値で管理します。なので、例えば回数を10にしたい場合、開始 Indexが 0 、終了 Index が 9 となります。

開始 Indexが 5 、 終了 Index が 14 の場合でも、ループ回数に変わりはないのです。

じゃあ、1から始めりゃいいじゃん、ってなるかと思うのですが、最近「ゼロから始める○○」が人気のヒケツ(?)っぽいので、まぁそんな感じです。(実際は座標なんかを計算したり配列を扱うときにゼロから始まっていた方が都合がいい場合が多いのです)

 

なので、ForLoopの繰り返し処理では、文字列の長さを、Last Indexとして使うためには 予め ー1しています。

 

変数の値を参照しにいくたびに 毎回 -1 の計算が入ってしまうのを避けるために、下のようにしています。

f:id:hiyokosabrey:20171020223655p:plain

ForLoopの中を見てみると、First Index は回数をカウントするためにローカル変数で管理されていますが、 Last Index の方は、毎回 つながったピンの値を参照します。

下のようにつないでしまうと、Last Indexピンが値を受け取ろうとするときに、-1の計算が入ってしまいます。

f:id:hiyokosabrey:20171020223825p:plain

この程度たかが知れてますが、普段から意識してないと「チリツモ」になりやすいので、エンジニアと良好な関係を築くために、UI紳士としては意識しないわけにはいかないと思うのです。

はい、流れを戻して続きを。

f:id:hiyokosabrey:20171020225505p:plain

左端のノードは、Construct Object from Class という名のノードです。

↓取り出した直後の状態。

f:id:hiyokosabrey:20171020225745p:plain

Classをセットすると、NONEの部分の表記が変わります。今回はテキストブロックなので、Text をチョイスします。

 

ローカル変数 TempFontの中身は、Details (詳細)タブで設定します。今回はこんな感じ。

f:id:hiyokosabrey:20171020230224p:plain

 

この関数では、テキストブロックをブループリントで生成しています。

そしていつもなら、クリックとキーボードで設定していた内容も、変数と専用のノードを組み合わせて設定しています。一文字づつ処理して、Horizontal Box に並べていくのです。

ひととおり並べ終わったら、ループ処理のあとに、ブーリアン型の変数に True をセットします。

これで関数は完成。

 

つぎにアニメーションの部分。Event Tick を利用します。

関数が呼ばれると、文字列がバラバラになって並べられて、最後に ブーリアン型の変数に True が入ってようやく、このEvent Tick が最後まで稼働します。

f:id:hiyokosabrey:20171020230926p:plain

Event Tickは、 このWidgetブループリントが Viewport に置かれたらすぐに動き出します。関数が呼ばれる前に動き出すとエラーが出るので、必要な処理が終わるまでは、Branchノードでブロックしています。

 %ノードは、 値がずぅーっと加算され続けるのを防ぐためと、円の1周分の角度は360度だからです。

角度から、三角関数を使って 値を計算します。その担当をマクロにしました。

f:id:hiyokosabrey:20171020233958p:plain

Period は カーブの周期(的なもの)、Radius は 半径 です。

中身はこうなってます。

f:id:hiyokosabrey:20171020234221p:plain

三角関数の角度Θ(シータ)にあたる部分は、「ラジアン」(Radians)が基本かと思いますが、ブループリントでは、0°から360°の「角度」(Degrees)で扱うノードも用意されています。

f:id:hiyokosabrey:20171020234801p:plain

マクロでは角度 Degrees の方を使用しています。

 

これで準備はできました。

あとは関数を呼び出して文字列を渡すだけです。

とりあえず確認のために、Event Construct につなぎます。

f:id:hiyokosabrey:20171020235150p:plain

 

これで Widgetは完成です。

 

 

あとはレベルブループリントにて、Viewportに追加するだけです。

f:id:hiyokosabrey:20171020235427p:plain

 

再生してみましょう。

 f:id:hiyokosabrey:20171021000449g:plain

 Screen to GIF というアプリを使ってみました。

ちょっとひっかかるときがあるけど、い感じに撮れてます。

サインカーブを、Y座標にするこんな風に上下にユラユラします。

 

マクロのパラメータをいろいろいじると揺れ具合が調整できます。

Period を大きな値にすると、カーブが細かくなってジグザグします。

Radiusの値を大きくすると上下の揺れ幅が大きくなります。

 

この値を、Shear や Angle にセットしても面白い動きになります。

f:id:hiyokosabrey:20171021001200p:plain

 

 Angleの場合。

f:id:hiyokosabrey:20171021001729p:plain

できたのが

f:id:hiyokosabrey:20171021001745g:plain

 

Shearの場合。

f:id:hiyokosabrey:20171021002328p:plain

動きは

f:id:hiyokosabrey:20171021002352g:plain

ちょっと酔いそう。

 

サインカーブは、プラスとマイナスの値を行ったり来たりするので、どちらか一方だけにするとバウンドするような動きになります。

f:id:hiyokosabrey:20171021003928p:plain

 すると、

f:id:hiyokosabrey:20171021020110g:plain

他にもカラーを変えてみたりもできます。

 

ロード画面くらいしか使える場所は無さそうですが、ちょっとは刺激的になった気がします。なかなか楽しいですねUE。

 

ではでは 今回はこの辺で。

 

 

 

 

話しかけるときなんかのマーカーみたいなやつを作ってみる【改】

前回の記事でポップアップする▼マーカーを作ってみたのですが、改造することにしました。

limesode.hatenablog.com

なぜかというと、このタイプのUI表示は同時に複数出ることがなく、常に一つだけが表示されます。前回の作り方では呼び出し元であるActorの配置とタイミング次第では、いくつもスポーンしてしまう可能性があったからです。複数個現れないようにきっちリと管理すればいいのですが、ちょっとフローが複雑になりそうなので思い切って作り変えることにしました。

どうやらプログラム界隈では「シングルトン パターン」なるものがあるようで、同じような感じの扱いができないかな? ということで試してみたのが今回の内容でもあります。

UE4にその仕組みが実装できるのかどうか、自分の頭では見つけられなかったので、完全に我流になります。

 

前回作った、BP_PopMarker をあらかじめワールドに置いておきます。座標は適宜書き換えることになるので、適当な位置でも大丈夫。

f:id:hiyokosabrey:20171017225130p:plain

このブループリントをさっそく改造します。

最初から表示されていない方がいいので Construction Script 内で非表示にします。

f:id:hiyokosabrey:20171017225748p:plain

Set Visibilityノードにある2つのチェックボックスのうち、

Propagate to Children にチェックを付けると、Targetの子階層もまとめて扱うことができます。この場合 Default Scene Root に対して設定しているので、このBlueprintに含まれる全てが対象になります。

 

次に、変数の設定を変えます。

f:id:hiyokosabrey:20171017230356p:plain

前回このName型の変数は、 Expose on Spawn にチェックを入れていました。

これを戻します。

f:id:hiyokosabrey:20171017230648p:plain

この変数は、値を受け取るという役割のはそのままです。

 

次に

Event Graph の Event BeginPlay につないだノードを編集します。

f:id:hiyokosabrey:20171017232016p:plain

 キャストノードの後ろの部分を消します。

そしてキャスト結果にピンから変数を昇格させて作ります。

f:id:hiyokosabrey:20171017232048p:plain

 

続けて、できたばかりのオリジナルWidget型の変数を利用するために、

新しくカスタムイベントを2つ追加します。

まずは表示開始のイベント。

f:id:hiyokosabrey:20171017230845p:plain

表示終了のイベント。

f:id:hiyokosabrey:20171017230854p:plain

用が済んだので変数の中身を空にしています。

 

これでポップするブループリントは完成です。

 

このポップアップマーカー▼の呼び出し元を変えます。

f:id:hiyokosabrey:20171017232910p:plain

このブループリント内で、コリジョンの判定をしていましたが、バッサリ止めます。

f:id:hiyokosabrey:20171017233341p:plain

あとは、変数化していたWidget型の変数を削除してお片付け完了です。

f:id:hiyokosabrey:20171017233627p:plain

スッキリしたところで保存します。

 

これで前回分の改造は終了です。ここからは、新しく追加する作業です。

 

レベルブループリントで

ワールドに置いた BP_PopMarker をレベルブループリントから扱います。

レベルブループリントを開くには、Blueprintsアイコンの横の▼メニューから。

f:id:hiyokosabrey:20171017234332p:plain

開いたら、ワールドアウトライナから、配置した BP_Chair をドラッグ&ドロップします。

f:id:hiyokosabrey:20171017235213p:plain

このノードからコリジョン判定のBindイベントノードを取り出します。

f:id:hiyokosabrey:20171017235915p:plain

Assign On Actor Begin Overlap を選択するとノードが2つ出てきます。

f:id:hiyokosabrey:20171018000239p:plain

このBind~ ノードに、Event BeginPlayノードと、他の BP_Chair をつなぎます。

f:id:hiyokosabrey:20171018000618p:plain

カスタムイベントに下図のようにつないでいきます。

f:id:hiyokosabrey:20171018001436p:plain

タグの有無を判定して存在していれば、ワールドに置いている BP_PopMarkerのポジションを変更して、中のカスタムイベントにタグを渡しています。

カスタムイベントからは、値を2つ受け取ることができます。気になる場合は、Print StringノードにつなぐとActor名が確認できます。Overlaped Actor はこの場合 BP_Chair になります。

 

同様に、コリジョンから出た時のイベントもつなぎます。今度は、

Assign On Actor End Overlap です。

f:id:hiyokosabrey:20171018002618p:plain

Begin Overlap と同じように他の BP_Chair もつなぎます。

f:id:hiyokosabrey:20171018002949p:plain

カスタムイベントには、BP_PopMarker の中のイベント(消去用)を呼び出しています。

これで完了です。

 

 

コンパイルして確認してみましょう。

f:id:hiyokosabrey:20171018004138j:plain

前回と比べて変わることは無いのですが・・・

 

BP_Chair に 追加していた判定のイベントがごっそり無くなったことで、複数を配置したときの容量が節約できています。

シングルトンパターンなんていう身に持て余した言葉を冒頭に掲げたものの、結局は大したことしてなくて、ワールドに直置きしてそれを利用しているだけという・・・

ブループリントインターフェイスも試してみたのですが、インスタンスをうまく経由させることができませんでした。むむむ。力不足。

 

ひとまずこの方法で、もう少し進めてみようと思います。

ツッコミ等あればコメントください。

 

ではでは

ステキにポップする▼ライフを!

 

 

補足

前回の記事を実践している前提で書いたので、端折っているところが かなりあります。

 もし今回の記事から読んで、やってみようと思われる方は、

前回の記事を進めていく中で、BP_Chair を作る際に Boxコリジョンを置くだけOKです。