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

1.5K Views

October 08, 19

スライド概要

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

profile-image

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

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
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