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

スライド概要

2019年10月6日に行われた「UNREAL FEST EAST 2019」における「「SAMURAI SPIRITS」におけるエフェクトの実装例」の登壇資料です。
●公式サイト
https://unrealengine.jp/unrealfest/
===
前半 エフェクトツール「Effekseer」を使ったエフェクト制作事例のご紹介
後半 エフェクトツール内にある機能をUE4で実現する際に問題になった点やその解決法のご紹介

profile-image

エピック ゲームズ ジャパン

@EpicGamesJapan

作者について:

Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/

スライド一覧
シェア
埋め込む»CMSなどでJSが使えない場合

公開日

2019-10-08 06:24:47

各ページのテキスト

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.43b) #ue4fest

8. Effekseerの紹介 • Effekseerとは オープンソースで開発されているエフェクトツール GitHub上で公開されている (9/12時点の最新バージョンは1.43b) • 今回行った拡張について 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

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

123. 背景エフェクトが出ない問題とその解決 ・結果 ・根本の解決は出来なかったが、回避は出来た ・反省点 ・背景エフェクトがあるレベルに毎回処理を書く必要が出た ・後に背景エフェクトに対してロジックを組む必要が出た #ue4fest

124. 背景エフェクトが出ない問題とその解決 ・結果 ・根本の解決は出来なかったが、回避は出来た ・反省点 ・背景エフェクトがあるレベルに毎回処理を書く必要が出た ・後に背景エフェクトに対してロジックを組む必要が出た ・初めからC++に処理を逃がすべきだった #ue4fest

125. 本講演は以上になります #ue4fest

126. 募集中! https://www.snk-corp.co.jp/recruit/index.php ・ゲームプログラマー ・テクニカルデザイナー ・CGデザイナー #ue4fest

127. ご清聴ありがとうございました #ue4fest