エフェクトツール機能の実装例【UNREAL FEST EAST 2019】

1.

エフェクトツール機能の実装例株式会社 SNK 大前祐人 #ue4fest

2.

自己紹介大前祐人株式会社 SNK ゲームプログラマー 2018年入社、業歴2年目今年発売の「SAMURAI SPIRITS」ではエフェクトツールの開発を担当 #ue4fest

3.

注意事項 ※UE4.22で実装し直したものになります・ゲームはUE4.21を使用しています ※実装例では1つのMaterialで完結するようにしています・実際にゲームで使用した物と相違している部分があります #ue4fest

4.

目次 ① Effekseerについて ② フェイスカリング実装例 ③ エフェクト反転時のテクスチャ反転防止例 ④ アルファクランチ実装例 ⑤ フレームブレンド実装例 ⑥ 背景エフェクトが出ない問題とその解決 #ue4fest

5.

目次 ① Effekseerについて ② フェイスカリング実装例 ③ エフェクト反転時のテクスチャ反転防止例 ④ アルファクランチ実装例 ⑤ フレームブレンド実装例 ⑥ 背景エフェクトが出ない問題とその解決 #ue4fest

6.

#ue4fest

7.

Effekseerの紹介 • Effekseerとはオープンソースで開発されているエフェクトツール GitHub上で公開されている (9/12時点の最新バージョンは1.43ｂ) #ue4fest

8.

Effekseerの紹介 • Effekseerとはオープンソースで開発されているエフェクトツール GitHub上で公開されている (9/12時点の最新バージョンは1.43ｂ) • 今回行った拡張について 1.31をベースに独自機能の拡張 #ue4fest

9.

目次 ① Effekseerについて ② フェイスカリング実装例 ③ エフェクト反転時のテクスチャ反転防止例 ④ アルファクランチ実装例 ⑤ フレームブレンド実装例 ⑥ 背景エフェクトが出ない問題とその解決 #ue4fest

10.

フェイスカリング実装例裏面カリング表面カリングカリング無し #ue4fest

11.

フェイスカリング実装例・どんな機能? #ue4fest

12.

フェイスカリング実装例・どんな機能? ・指定した向きの面を非表示 #ue4fest

13.

フェイスカリング実装例・どんな機能? ・指定した向きの面を非表示・既存の設定で解決できない? #ue4fest

14.

フェイスカリング実装例・どんな機能? ・指定した向きの面を非表示・既存の設定で解決できない? ・Material内のTwoSidedでは、表面か両面表示しか選べない #ue4fest

15.

フェイスカリング実装例・どんな機能? ・指定した向きの面を非表示・既存の設定で解決できない? ・Material内のTwoSidedでは、表面か両面表示しか選べない・裏面表示が無いので作る #ue4fest

16.

フェイスカリング実装例・実装の肝「TwoSidedSign」 #ue4fest

17.

フェイスカリング実装例・実装の肝「TwoSidedSign」・表面なら+1.0, 裏面なら-1.0を出力 #ue4fest

18.

フェイスカリング実装例・実装の肝「TwoSidedSign」・表面なら+1.0, 裏面なら-1.0を出力・公式Documentでは法線の反転に使用 #ue4fest

19.

フェイスカリング実装例・実装の肝「TwoSidedSign」・表面なら+1.0, 裏面なら-1.0を出力・公式Documentでは法線の反転に使用・板ポリの1枚でトランプが出来る #ue4fest

20.

フェイスカリング実装例・実装方法 #ue4fest

21.

フェイスカリング実装例・実装方法・「TwoSided」を有効 #ue4fest

22.

フェイスカリング実装例・実装方法・「TwoSided」を有効・カリング面を指定出来るパラメータを追加 #ue4fest

23.

フェイスカリング実装例・実装方法・「TwoSided」を有効・カリング面を指定出来るパラメータを追加・消したい面のαを0、表示したい面のαを1になるように計算 #ue4fest

24.

フェイスカリング実装例・実装 #ue4fest

25.

フェイスカリング実装例・全体像 #ue4fest

26.

フェイスカリング実装例・完成 #ue4fest

27.

目次 ① Effekseerについて ② フェイスカリング実装例 ③ エフェクト反転時のテクスチャ反転防止例 ④ アルファクランチ実装例 ⑤ フレームブレンド実装例 ⑥ 背景エフェクトが出ない問題とその解決 #ue4fest

28.

エフェクト反転時のテクスチャ反転防止例 #ue4fest

29.

エフェクト反転時のテクスチャ反転防止例・エフェクトが反転とは? #ue4fest

30.

エフェクト反転時のテクスチャ反転防止例・エフェクトが反転とは? ・2P側のエフェクトはXスケールが-1.0倍される #ue4fest

31.

エフェクト反転時のテクスチャ反転防止例・エフェクトが反転とは? ・2P側のエフェクトはXスケールが-1.0倍される・頂点のX座標が反転する為、テクスチャの向きが変わる #ue4fest

32.

エフェクト反転時のテクスチャ反転防止例・実装の肝「Xスケールの符号」 #ue4fest

33.

エフェクト反転時のテクスチャ反転防止例・実装の肝「Xスケールの符号」・マテリアル関数、ObjectScaleの検討 #ue4fest

34.

エフェクト反転時のテクスチャ反転防止例・実装の肝「Xスケールの符号」・マテリアル関数、ObjectScaleの検討・取得出来るのがスケールの大きさなので今回は使えない #ue4fest

35.

エフェクト反転時のテクスチャ反転防止例・計算で「Xスケールの符号」を求める #ue4fest

36.

エフェクト反転時のテクスチャ反転防止例・計算で「Xスケールの符号」を求める・+方向のX軸と、オブジェクトのX軸との内積で判定 #ue4fest

37.

エフェクト反転時のテクスチャ反転防止例・計算で「Xスケールの符号」を求める・+方向のX軸と、オブジェクトのX軸との内積で判定 ※+方向のX軸(左手座標系) #ue4fest

38.

エフェクト反転時のテクスチャ反転防止例・計算で「Xスケールの符号」を求める・+方向のX軸と、オブジェクトのX軸との内積で判定 ※+方向のX軸(左手座標系) ※変換後の向き(-スケールの場合) #ue4fest

39.

エフェクト反転時のテクスチャ反転防止例・+方向のX軸を求める #ue4fest

40.

エフェクト反転時のテクスチャ反転防止例・+方向のX軸を求める・Cross(WorldY軸, WorldZ軸)で求める #ue4fest

41.

エフェクト反転時のテクスチャ反転防止例・+方向のX軸を求める・Cross(WorldY軸, WorldZ軸)で求める ※+方向のX軸もワールドで求める (オブジェクトのX軸はワールド変換で取得する為) #ue4fest

42.

エフェクト反転時のテクスチャ反転防止例・+方向のX軸を求める・Cross(WorldY軸, WorldZ軸)で求める ※+方向のX軸もワールドで求める (オブジェクトのX軸はワールド変換で取得する為) = #ue4fest

43.

エフェクト反転時のテクスチャ反転防止例・オブジェクトのX軸を求める #ue4fest

44.

エフェクト反転時のテクスチャ反転防止例・オブジェクトのX軸を求める・V(1, 0, 0)をTransformVector(Local To World)するだけ = #ue4fest

45.

エフェクト反転時のテクスチャ反転防止例・+方向のX軸と、オブジェクトのX軸で内積を求める #ue4fest

46.

エフェクト反転時のテクスチャ反転防止例・+方向のX軸と、オブジェクトのX軸で内積を求める #ue4fest

47.

エフェクト反転時のテクスチャ反転防止例・+方向のX軸と、オブジェクトのX軸で内積を求める・+スケールの場合は1.0, -スケールの場合は-1.0が得られる #ue4fest

48.

エフェクト反転時のテクスチャ反転防止例・内積結果をUV反転で使いやすい様に加工 #ue4fest

49.

エフェクト反転時のテクスチャ反転防止例・内積結果をUV反転で使いやすい様に加工・+スケール = 0.0, -スケール = 1.0 になるように加工・例) 1.0 - Clamp(dot, 0.0, 1.0) #ue4fest

50.

エフェクト反転時のテクスチャ反転防止例・UV値に対して計算を行う #ue4fest

51.

エフェクト反転時のテクスチャ反転防止例・UV値に対して計算を行う・(加工後の値 – U値)で反転 #ue4fest

52.

エフェクト反転時のテクスチャ反転防止例・UV値に対して計算を行う・(加工後の値 – U値)で反転・+スケールの場合Absで絶対値に ※0.0 – U = -U #ue4fest

53.

エフェクト反転時のテクスチャ反転防止例・最後にTextureのUVsに繋ぐ #ue4fest

54.

エフェクト反転時のテクスチャ反転防止例・全体像 #ue4fest

55.

エフェクト反転時のテクスチャ反転防止例・完成反転防止あり反転防止なし #ue4fest

56.

エフェクト反転時のテクスチャ反転防止例・完成 #ue4fest

57.

目次 ① Effekseerについて ② フェイスカリング実装例 ③ エフェクト反転時のテクスチャ反転防止例 ④ アルファクランチ実装例 ⑤ フレームブレンド実装例 ⑥ 背景エフェクトが出ない問題とその解決 #ue4fest

58.

アルファクランチの実装例 #ue4fest

59.

アルファクランチの実装例・どんな機能? #ue4fest

60.

アルファクランチの実装例・どんな機能? ・Dissolve #ue4fest

61.

アルファクランチの実装例・どんな機能? ・Dissolve ・閾値を設定、その閾値以下のα値を切り捨てる #ue4fest

62.

アルファクランチの実装例・どんな機能? ・Dissolve ・閾値を設定、その閾値以下のα値を切り捨てる・動的に閾値を変える事で千切れを表現 #ue4fest

63.

アルファクランチの実装例・閾値 #ue4fest

64.

アルファクランチの実装例・閾値・0~1の範囲を指定 #ue4fest

65.

アルファクランチの実装例・閾値・0~1の範囲を指定・(α値 - 閾値)が0.0以下の部分が表示されない #ue4fest

66.

アルファクランチの実装例・閾値・0~1の範囲を指定・(α値 - 閾値)が0.0以下の部分が表示されない・サンプルではTimeノードを使用、実際に使用する場合は動的パラメータを使用する #ue4fest

67.

アルファクランチの実装例・実装 #ue4fest

68.

アルファクランチの実装例・実装・α値から閾値を引き、Ceilノードで二値化 #ue4fest

69.

アルファクランチの実装例・実装・α値から閾値を引き、Ceilノードで二値化・そのままオパシティマスク(オパシティ)に繋ぐ #ue4fest

70.

アルファクランチの実装例・一旦完成 #ue4fest

71.

アルファクランチの実装例・エッジに色を付ける #ue4fest

72.

アルファクランチの実装例・エッジに色を付ける・EdgeThreshold #ue4fest

73.

アルファクランチの実装例・エッジに色を付ける・EdgeThreshold ・この数値以下のα値の部分に色を付ける #ue4fest

74.

アルファクランチの実装例・エッジに色を付ける・EdgeThreshold ・この数値以下のα値の部分に色を付ける・Ceilで二値化して線形補間 #ue4fest

75.

アルファクランチの実装例・全体像 #ue4fest

76.

アルファクランチの実装例・完成 #ue4fest

77.

目次 ① Effekseerについて ② フェイスカリング実装例 ③ エフェクト反転時のテクスチャ反転防止例 ④ アルファクランチ実装例 ⑤ フレームブレンド実装例 ⑥ 背景エフェクトが出ない問題とその解決 #ue4fest

78.

フレームブレンドの実装例 #ue4fest

79.

フレームブレンドの実装例・どんな機能? #ue4fest

80.

フレームブレンドの実装例・どんな機能? ・フリップブックテクスチャのカラーを補間 #ue4fest

81.

フレームブレンドの実装例・どんな機能? ・フリップブックテクスチャのカラーを補間・数フレーム毎にテクスチャの切り替える場合やスローモーションになる場合に有効 #ue4fest

82.

フレームブレンドの実装例・どんな機能? ・フリップブックテクスチャのカラーを補間・数フレーム毎にテクスチャの切り替える場合やスローモーションになる場合に有効・実装方法 #ue4fest

83.

フレームブレンドの実装例・どんな機能? ・フリップブックテクスチャのカラーを補間・数フレーム毎にテクスチャの切り替える場合やスローモーションになる場合に有効・実装方法・現在のフレームの色と次のフレームのカラーを線形補間 #ue4fest

84.

フレームブレンドの実装例・実装 #ue4fest

85.

フレームブレンドの実装例・実装・Flipbook用にUVを変換するMFを実装 #ue4fest

86.

フレームブレンドの実装例・実装・Flipbook用にUVを変換するMFを実装 #ue4fest

87.

フレームブレンドの実装例・MF_FlipbookUVの実装 #ue4fest

88.

フレームブレンドの実装例・MF_FlipbookUVの実装 ①UVを1枚分のサイズに ②UVを描画したい画像までオフセット ① ② #ue4fest

89.

フレームブレンドの実装例・MF_FlipbookUVの実装・UVの開始地点、UVのサイズを求める #ue4fest

90.

フレームブレンドの実装例・MF_FlipbookUVの実装・UVの開始地点、UVのサイズを求める・UVのサイズを変換、UV開始地点までオフセット #ue4fest

91.

フレームブレンドの実装例・現在の画像番号を取得 #ue4fest

92.

フレームブレンドの実装例・現在の画像番号を取得・0~(最大枚数-1) #ue4fest

93.

フレームブレンドの実装例・現在の画像番号を取得・0~(最大枚数-1) ・サンプルでは右図の通り・実際にはライフタイムや次のテクスチャまでのフレーム数で計算する形に #ue4fest

94.

フレームブレンドの実装例・UV値の取得 #ue4fest

95.

フレームブレンドの実装例・UV値の取得・MF_FlipbookUVを使用・現在のテクスチャのUV ・次のテクスチャのUV #ue4fest

96.

フレームブレンドの実装例・カラーの取得と補間 #ue4fest

97.

フレームブレンドの実装例・カラーの取得と補間・それぞれのカラーを取得・現在フレームの小数値で線形補間 #ue4fest

98.

フレームブレンドの実装例・全体像 #ue4fest

99.

フレームブレンドの実装例・完成ブレンドなしブレンドあり #ue4fest

100.

目次 ① Effekseerについて ② フェイスカリング実装例 ③ エフェクト反転時のテクスチャ反転防止例 ④ アルファクランチ実装例 ⑤ フレームブレンド実装例 ⑥ 背景エフェクトが出ない問題とその解決 #ue4fest

101.

背景エフェクトが出ない問題とその解決 #ue4fest

102.

背景エフェクトが出ない問題とその解決・現象 #ue4fest

103.

背景エフェクトが出ない問題とその解決・現象・レベル上に配置した背景エフェクトが表示されない #ue4fest

104.

背景エフェクトが出ない問題とその解決・現象・レベル上に配置した背景エフェクトが表示されない・他のステージだと表示されている #ue4fest

105.

背景エフェクトが出ない問題とその解決・原因 #ue4fest

106.

背景エフェクトが出ない問題とその解決・原因・レベル上に配置されているアクターの初期化順がバラバラ #ue4fest

107.

背景エフェクトが出ない問題とその解決・原因・レベル上に配置されているアクターの初期化順がバラバラ・背景エフェクトの初期化時に、依存先のアクターの初期化が行われていなかった #ue4fest

108.

背景エフェクトが出ない問題とその解決・原因・レベル上に配置されているアクターの初期化順がバラバラ・背景エフェクトの初期化時に、依存先のアクターの初期化が行われていなかった・他のステージで表示されていたのは、運よく初期化順が正しい順番で行われていた為 #ue4fest

109.

背景エフェクトが出ない問題とその解決・EffekseerPluginの構造 #ue4fest

110.

背景エフェクトが出ない問題とその解決・EffekseerPluginの構造・EffekseerSystemComponent(以下EfkSystem) ・エフェクトを更新、描画 #ue4fest

111.

背景エフェクトが出ない問題とその解決・EffekseerPluginの構造・EffekseerSystemComponent(以下EfkSystem) ・エフェクトを更新、描画・EffekseerEmitterComponent(以下EfkEmitter) ・作成したエフェクトのアセットを設定・レベル上に配置、スポーンさせる事で再生、描画・EfkSystemを参照する必要がある #ue4fest

112.

背景エフェクトが出ない問題とその解決・実際に起こっていた事 #ue4fest

113.

背景エフェクトが出ない問題とその解決・実際に起こっていた事 1, EfkEmitterの初期化、再生(EfkSystemに登録) 2, EfkSystemの初期化(再生リストの初期化) #ue4fest

114.

背景エフェクトが出ない問題とその解決・実際に起こっていた事 1, EfkEmitterの初期化、再生(EfkSystemに登録) 2, EfkSystemの初期化(再生リストの初期化) ・理想の動作 #ue4fest

115.

背景エフェクトが出ない問題とその解決・実際に起こっていた事 1, EfkEmitterの初期化、再生(EfkSystemに登録) 2, EfkSystemの初期化(再生リストの初期化) ・理想の動作 1, EfkSystemの初期化(再生リストの初期化) 2, EfkEmitterの初期化、再生(EfkSystemに登録) #ue4fest

116.

背景エフェクトが出ない問題とその解決・解決法(逃げ方) #ue4fest

117.

背景エフェクトが出ない問題とその解決・解決法(逃げ方) ・EfkSystemはレベル上に配置したまま #ue4fest

118.

背景エフェクトが出ない問題とその解決・解決法(逃げ方) ・EfkSystemはレベル上に配置したまま・EfkEmitterを配置せずにSpawnActorでタイミングをずらして生成 #ue4fest

119.

背景エフェクトが出ない問題とその解決・解決法(逃げ方) ・EfkSystemはレベル上に配置したまま・EfkEmitterを配置せずにSpawnActorでタイミングをずらして生成・レベルBPに記述 #ue4fest

120.

背景エフェクトが出ない問題とその解決・結果 #ue4fest

121.

背景エフェクトが出ない問題とその解決・結果・根本の解決は出来なかったが、回避は出来た #ue4fest