コンテンツサンプルを楽しむ"超"初心者の為のNiagara

43.5K Views

September 18, 20

スライド概要

2020年9月12日に行われた「出張ヒストリア! ゲーム開発勉強会2020」にて発表させていただいたスライドです。

イベント詳細
https://historia.co.jp/archives/16322/

講演動画
https://youtu.be/R-dvkov9cts

講演者:
斎藤 修(Epic Games Japan Technical Artist - Developer Relations)

講演内容:
4.25よりプロダクションレディとなったUEの新エフェクトツールNiagara!
「いや、でも、ちょっと待って。そもそもエフェクト自体を触った事もないんだけど……、Niagaraって難しいんでしょ?」という方、ご安心ください。
Niagaraは初めてエフェクトを作る!という方にもピッタリのとても楽しいツールとなっております。
エミッターって何?パーティクルって何?という皆様、
UEに豊富に用意されているNiagaraのサンプルを通して、初めてのエフェクトにチャレンジしてみませんか?

profile-image

株式会社ヒストリアは、Unreal Engine専門のソフトウェア開発会社です。ゲーム事業とエンタープライズ事業、2 つの軸でソフトウェアの企画、開発を行っています。また、Unreal Engine の学習を目的とした作品制作コンテスト『UE5ぷちコン』や、『出張ヒストリア! ゲーム開発勉強会』を主催、技術ブログを毎週更新など、Unreal Engine コミュニティを盛り上げる活動も行っております。

シェア

またはPlayer版

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

関連スライド

各ページのテキスト
1.

コンテンツサンプルを楽しむ "超"初心者の為のNiagara Epic Games Japan Technical Artist - Developer Relations 斎藤 修

2.

自己紹介 斎藤 修 https://twitter.com /shiba_zushi Epic Games Japan Technical Artist - Developer Relations ● Epicに入って1年ちょっとです ● その前は規模大きめのコンソール開発してました ● さらにその前は漫画とか描いてました ● UE4とHoudiniが好物です #UE4 | @UNREALENGINE

3.

はじめに #UE4 | @UNREALENGINE

4.

はじめに Niagaraが UE4.25にて プロダクションレディとなりました! #UE4 | @UNREALENGINE

5.

はじめに わーい! #UE4 | @UNREALENGINE

6.

はじめに Niagaraは エフェクトの各機能を ノードベースで構築する事が可能です #UE4 | @UNREALENGINE

7.

はじめに プログラマさんに 頼まないとできない… つまり それにより これまでアーティストだけでは届かなかった あらゆる表現に手を伸ばすことが可能となりました #UE4 | @UNREALENGINE

8.

はじめに Niagaraは アーティストの皆様に 力を与えるツールです #UE4 | @UNREALENGINE

9.

はじめに ……… #UE4 | @UNREALENGINE

10.

はじめに ……とはいえ 皆様 こんなことを思ったりされませんでした? #UE4 | @UNREALENGINE

11.

はじめに Niagaraって…… 難しそう エフェクト触ってみたいと思ってたけど 敷居が上がった気がする 初心者にNiagaraは ムリなんじゃないの? #UE4 | @UNREALENGINE

12.

はじめに いいえ 全く そんなことは ございません #UE4 | @UNREALENGINE

13.

今回の講演のターゲット 今回の講演の対象者は 「初めてエフェクトを触る方」です #UE4 | @UNREALENGINE

14.

今回の講演のターゲット その為 プロの方には 少し物足りない内容かと思うのですが…… #UE4 | @UNREALENGINE

15.

今回の講演のターゲット 僕自身も元々背景アーティストです #UE4 | @UNREALENGINE

16.

今回の講演のターゲット 何事も初めて学ぶ時って 「まず何がわからないかわからない状態」になりますよね #UE4 | @UNREALENGINE

17.

今回の講演のターゲット そこで本講演では エフェクトをこれから学びたい人(あの日の僕) に向けて UEが提供する 「機能別(コンテンツ)サンプル」を通して 初めてのNiagaraエフェクトについて 何となくご説明させて頂けたらと思います #UE4 | @UNREALENGINE

18.

今回の講演のターゲット 怖くないです!Niagara! #UE4 | @UNREALENGINE

19.

機能別(コンテンツ)サンプル では 早速ですが 「機能別(コンテンツ)サンプル」について #UE4 | @UNREALENGINE

20.

機能別(コンテンツ)サンプル 「機能別(コンテンツ)サンプル」とは Epicが提供しているUEの様々な機能のサンプル群 #UE4 | @UNREALENGINE

21.

機能別(コンテンツ)サンプル ランチャーから無料でDL可能です #UE4 | @UNREALENGINE

22.

機能別(コンテンツ)サンプル サンプルの中にはもちろんNiagaraもあり Niagaraエフェクトの様々なサンプルが展示されております #UE4 | @UNREALENGINE

23.

機能別(コンテンツ)サンプル Niagaraのサンプルは 4.25.3現在 シンプルなものからちょっと難易度の高いものまで合計15種! #UE4 | @UNREALENGINE

24.

機能別(コンテンツ)サンプル そして今回 こちらの機能別サンプルをお勧めする理由は…… #UE4 | @UNREALENGINE

25.

機能別(コンテンツ)サンプル “手っ取り早い” #UE4 | @UNREALENGINE

26.

機能別(コンテンツ)サンプル ナイアガラは多くの方を魅了する素晴らしいツールですので 学習リソースが 実はすでに豊富にございます #UE4 | @UNREALENGINE

27.

機能別(コンテンツ)サンプル 詳細かつ丁寧な公式ドキュメント #UE4 | @UNREALENGINE

28.

機能別(コンテンツ)サンプル 有志の方の解説やブログ 多彩な講演 #UE4 | @UNREALENGINE

29.

機能別(コンテンツ)サンプル さらには素晴らしい書籍も出版されております #UE4 | @UNREALENGINE

30.

機能別(コンテンツ)サンプル しかし #UE4 | @UNREALENGINE

31.

機能別(コンテンツ)サンプル とりあえず動いてるやつ すぐ見たいなー 何となく全体像を知って モチベ上げてから詳しく 勉強していきたいなー #UE4 | @UNREALENGINE

32.

機能別(コンテンツ)サンプル わかります #UE4 | @UNREALENGINE

33.

機能別(コンテンツ)サンプル そんな欲望に機能別サンプルは 打ってつけなのでございます #UE4 | @UNREALENGINE

34.

機能別(コンテンツ)サンプル ただ 一つ欠点があるとすれば あまり「詳しい説明がない」こと #UE4 | @UNREALENGINE

35.

機能別(コンテンツ)サンプル そこで本講演です! #UE4 | @UNREALENGINE

36.

機能別(コンテンツ)サンプル 今回機能別サンプルの中から Niagaraの魅力をお伝えするのに最適な4種!選びました!! #UE4 | @UNREALENGINE

37.

機能別(コンテンツ)サンプル Base Noise Mesh Texture これらの4種を通して エフェクト全く触ったことない方が「Niagaraいいじゃん」 となるように解説させて頂けたらと思います #UE4 | @UNREALENGINE

38.

機能別(コンテンツ)サンプル 怖くないです Niagara #UE4 | @UNREALENGINE

39.

1.1 Simple Sprite Emitter では早速まず 最初のこちらから #UE4 | @UNREALENGINE

40.

1.1 Simple Sprite Emitter Niagaraサンプルの一番最初にあるこちらは 見た目の派手さは全くありませんが Niagaraの基本が詰まっている素晴らしいサンプルです #UE4 | @UNREALENGINE

41.

1.1 Simple Sprite Emitter Niagaraシステムをダブルクリックして Niagaraエディタを開きます #UE4 | @UNREALENGINE

42.

Niagaraエディタ エディタの詳細は 公式ドキュメントを見て頂くのが一番ですが 重要そうなウィンドウだけざっくり説明させて頂きます #UE4 | @UNREALENGINE

43.

Niagaraエディタ まずはプレビュー パネル 今作ってるエフェクトの見た目が確認できます #UE4 | @UNREALENGINE

44.

Niagaraエディタ 次にタイムラインパネル エフェクトの時間経過が確認できます #UE4 | @UNREALENGINE

45.

Niagaraエディタ システムオーバービューパネル とても重要です システム エミッター モジュールを一覧で確認できます #UE4 | @UNREALENGINE

46.

Niagaraエディタ そして選択パネル オーバービューで選択したアイテムのプロパティが見れます #UE4 | @UNREALENGINE

47.

Niagaraエディタ 最後にパラメータパネル パーティクルなどで使用しているアトリビュートが確認できます #UE4 | @UNREALENGINE

48.

Niagaraエディタ ……… #UE4 | @UNREALENGINE

49.

Niagaraエディタ システム モジュール エミッター アトリビュート パーティクル ちゅらい 専門用語多くないですか? #UE4 | @UNREALENGINE

50.

Niagaraエディタ 何度も繰り返しますがご安心下さい 本講演は 初心者歓迎 でございます #UE4 | @UNREALENGINE

51.

Niagara用語 パーティクル エミッター モジュール システム アトリビュート Niagaraにおいてこれらは重要語句です 何となくイメージ頂けるよう ざっくりご説明致します! #UE4 | @UNREALENGINE

52.

Niagara用語 パーティクル エミッター モジュール システム アトリビュート まずは「パーティクル」から #UE4 | @UNREALENGINE

53.

パーティクル Wikipedia contributors. "パーティクル." Wikipedia. Wikipedia, 18 Nov. 2016. Web. 6 Sep. 2020. パーティクルとは英語で「粒子」という意味です #UE4 | @UNREALENGINE

54.

パーティクル そう #UE4 | @UNREALENGINE つまりコレ一粒一粒がパーティクルです

55.

パーティクル Wikipedia contributors. "パーティクル・システム." Wikipedia. Wikipedia, 20 Jan. 2020. Web. 6 Sep. 2020. 一般的なリアルタイムエフェクトはパーティクルシステムとも呼ばれます 「パーティクル=エフェクト」と言ってしまっても良いかもしれません #UE4 | @UNREALENGINE

56.

パーティクル 「これらのツブツブを自由自在に操る事」=「エフェクト」 なのです #UE4 | @UNREALENGINE

57.

パーティクル パーティクル エミッター モジュール システム アトリビュート そして次に #UE4 | @UNREALENGINE

58.

パーティクル 先程のパーティクル 何もないところからいきなり出てきません 誰かが生み出しています #UE4 | @UNREALENGINE

59.

パーティクル 先程のパーティクル 何もないところからいきなり出てきません 誰かが生み出しています #UE4 | @UNREALENGINE

60.

エミッター パーティクル エミッター モジュール システム アトリビュート それが「エミッター」 #UE4 | @UNREALENGINE

61.

エミッター https://ejje.weblio.jp/content/emitter エミッターとは英語で「発するモノ」という意味です #UE4 | @UNREALENGINE

62.

エミッター Niagaraでいうと これです #UE4 | @UNREALENGINE

63.

エミッター エミッター自体の姿は見えません しかし パーティクルを生み出し制御しています #UE4 | @UNREALENGINE

64.

エミッター そしてエミッターは ほら なにか読んでますよね? 彼らは何かのルールに従ってパーティクルを生み出し操ります #UE4 | @UNREALENGINE

65.

モジュール パーティクル エミッター モジュール システム アトリビュート それが「モジュール」 #UE4 | @UNREALENGINE

66.

モジュール Niagaraでいうと これです #UE4 | @UNREALENGINE

67.

モジュール モジュールはとても単純な命令に切り分けられており それらを組み合わせることで多彩な制御を行う事が可能です #UE4 | @UNREALENGINE

68.

モジュール そしてNiagaraの素晴らしいところは このモジュールがノードベースというところです #UE4 | @UNREALENGINE

69.

モジュール 現在のNiagaraのモジュール数は約130種類(カスケード約70種類) 既存モジュールだけでも十分にエフェクト制作が可能です #UE4 | @UNREALENGINE

70.

モジュール 便利なモジュールを使うだけでもいいですし 中身を見て勉強してもいいですし 自分で1から作っても良い 3度美味しいですね! #UE4 | @UNREALENGINE

71.

モジュール パーティクル エミッター モジュール システム アトリビュート さぁ あと2つ どんどん行きましょう #UE4 | @UNREALENGINE

72.

システム パーティクル エミッター モジュール システム アトリビュート 「システム」について #UE4 | @UNREALENGINE

73.

システム Niagaraでいうと これです #UE4 | @UNREALENGINE

74.

システム イメージとしては「管理者」です #UE4 | @UNREALENGINE

75.

システム エミッター パーティクル システム イメージとしては「管理者」です #UE4 | @UNREALENGINE

76.

システム システム自身はパーティクルを出したりしません エミッターのまとめ役がお仕事です #UE4 | @UNREALENGINE

77.

システム システム自体はあまり多くの設定はありませんが エミッターやエフェクト全体共通の設定などができます #UE4 | @UNREALENGINE

78.

システム また 重要な点としては Niagaraをゲームで使用する際にシステムは必須です 現実社会と同じで 何かをするには常に責任者が必要なのです #UE4 | @UNREALENGINE

79.

アトリビュート パーティクル エミッター モジュール システム アトリビュート そして最後に「アトリビュート」 重要な概念です #UE4 | @UNREALENGINE

80.

アトリビュート https://ejje.weblio.jp/content/attribute アトリビュートは英語で「属性」という意味です #UE4 | @UNREALENGINE

81.

アトリビュート こちらは中々イメージしづらいかもしれないのですが システム エミッター パーティクル 皆それぞれ持っている 個人情報の様なものです #UE4 | @UNREALENGINE

82.

アトリビュート パーティクルもエミッターもシステムも それぞれ自分の情報をアトリビュートとして持っています #UE4 | @UNREALENGINE

83.

アトリビュート 自分の位置 色 速度 年齢 など あらゆる情報がアトリビュートとして与えられ管理されています #UE4 | @UNREALENGINE

84.

アトリビュート Colorアトリビュートを 白から赤に書き換え また #UE4 | @UNREALENGINE このアトリビュートは書き換えられると リアルタイムに即反映します

85.

アトリビュート モジュールには このアトリビュートを制御する機能があり アトリビュートを書き換えることでパーティクルを操っているのです #UE4 | @UNREALENGINE

86.

Niagara用語 パーティクル エミッター モジュール システム アトリビュート さて皆様 以上でこれらの用語 何となーくイメージ出来ましたでしょうか?? #UE4 | @UNREALENGINE

87.

Niagara用語 [システム] > [エミッター] > [モジュール] > [パーティクル] という階層的なイメージが浮かんで来てれば万事OKです #UE4 | @UNREALENGINE

88.

Niagara用語 [システム] > [エミッター] > [モジュール] > [パーティクル] という階層的なイメージが浮かんで来てれば万事OKです #UE4 | @UNREALENGINE

89.

Niagara用語 [システム] > [エミッター] > [モジュール] > [パーティクル] という階層的なイメージが浮かんで来てれば万事OKです #UE4 | @UNREALENGINE

90.

Niagara用語 [システム] > [エミッター] > [モジュール] > [パーティクル] という階層的なイメージが浮かんで来てれば万事OKです #UE4 | @UNREALENGINE

91.

Niagara用語 Niagaraエディタも少し掴みやすくなったのではないでしょうか #UE4 | @UNREALENGINE

92.

1.1 Simple Sprite Emitter さて #UE4 | @UNREALENGINE 基本的なイメージができたところで 本題へ戻りましょう

93.

1.1 Simple Sprite Emitter 本講演のタイトルは "コンテンツサンプルを楽しむ" #UE4 | @UNREALENGINE

94.

1.1 Simple Sprite Emitter そう こちらのサンプルを楽しんでいるところでしたね! #UE4 | @UNREALENGINE

95.

1.1 Simple Sprite Emitter ここからは実際にエディタを操作しながら コンテンツサンプルをご説明させて頂きます #UE4 | @UNREALENGINE

96.

1.1 Simple Sprite Emitter ここからはぜひ講演動画の方をご覧いただけましたら幸いです https://youtu.be/R-dvkov9cts #UE4 | @UNREALENGINE

97.

ご清聴 ありがとうございました #UE4 | @UNREALENGINE