1
00:00:04,300 --> 00:00:05,380
‫こんにちは､ ようこそ｡

2
00:00:05,380 --> 00:00:05,770
‫今回の講演

3
00:00:05,770 --> 00:00:10,780
‫今回は､ アニメーション ブループリントのアニメーション グラフの使用方法について説明します｡

4
00:00:10,780 --> 00:00:17,830
‫この全く新しいコンセプトは､ 一連の変数を使用してアニメーションをブレンドする新しいコンセプトへの全体です｡

5
00:00:17,830 --> 00:00:19,270
‫見ての通り､ 変数を変えています｡

6
00:00:19,270 --> 00:00:21,700
‫アニメーションの融合を変えていく｡

7
00:00:21,700 --> 00:00:24,220
‫さっそく､ この仕組みを見てみましょう｡

8
00:00:25,380 --> 00:00:27,690
‫このように､ ある程度のアニメーションはできています｡

9
00:00:27,690 --> 00:00:30,030
‫しかし､ 明らかにダイナミックではありません｡

10
00:00:30,030 --> 00:00:32,130
‫特に面白いわけではありません｡

11
00:00:32,130 --> 00:00:38,670
‫これよりもはるかに複雑なアニメーションを行う必要がありますが､ Unreal には､ これを行うための優れたシステムが数多く組み込まれています｡

12
00:00:38,670 --> 00:00:45,750
‫その主なものがアニメーション ブループリントで､ これは明らかに青写真です｡

13
00:00:45,750 --> 00:00:51,420
‫アニメーションはBlueprintで行うのが理にかなっているので､ C++でこれを行うつもりはありません｡

14
00:00:51,660 --> 00:01:00,480
‫アニメーション ブループリントの主な目的は､ すべてのアニメーション ロジックをまとめ､ アニメーションをブレンド､

15
00:01:00,480 --> 00:01:10,470
‫マージ､ スイッチングして､ ゲーム ロジックがアニメーション ブループリントを駆動できるようにすることです｡

16
00:01:10,620 --> 00:01:15,150
‫では早速､ アニメーションの設計図を作ってみましょう｡

17
00:01:15,150 --> 00:01:20,520
‫コンテンツブラウザで新規追加するか､ 右クリックして､ アニメーションに移動し､

18
00:01:20,520 --> 00:01:27,780
‫アニメーション・ブループリントを選択すると､ すぐに親クラスを要求されます｡

19
00:01:27,780 --> 00:01:28,830
‫親クラスは必要ない

20
00:01:28,830 --> 00:01:30,060
‫デフォルトを使えばいいんです｡

21
00:01:30,060 --> 00:01:39,600
‫しかし､ スケルトンが必要なのは､ アニメーションのように､ スケルトンメッシュのように､ どちらもスケルトンに依存しているからです｡

22
00:01:39,600 --> 00:01:48,390
‫アニメーション ブループリントも同様で､ そのスケルトンのすべてのアニメーションを使用でき､ そのスケルトンに関連するすべてのメッシュに使用できることを意味します｡

23
00:01:48,930 --> 00:01:55,740
‫さて､ ここで明らかにWraithスケルトンが欲しいので､ それを選択してクリックしましょう｡

24
00:01:55,740 --> 00:02:00,720
‫レイスのスケルトンに基づいてアニメーションのブループリントを作成します｡

25
00:02:00,720 --> 00:02:12,060
‫そして､ 命名規則として､ BPのアンダースコアから始めます｡ このように接頭辞が異なるので､ 基本的にこれをジャストシューター文字と呼ぶことにしています｡

26
00:02:12,060 --> 00:02:16,200
‫キャラクターを撮影するためのアニメーションの設計図であることは､ 十分に理解できると思います｡

27
00:02:16,200 --> 00:02:23,760
‫アニメーション ブループリントを開き､ メイン ウィンドウにドッキングすると､

28
00:02:23,760 --> 00:02:29,880
‫アニメーション ブループリント エディタが表示されます｡

29
00:02:29,880 --> 00:02:35,250
‫真ん中にこのメイングラフのエリアがあるのですが､ ある意味違うんです｡

30
00:02:35,250 --> 00:02:37,680
‫だから､ 似たようなグラフの面積を確保したんです｡

31
00:02:37,680 --> 00:02:39,870
‫今までとは少し違うグラフになっています｡

32
00:02:39,870 --> 00:02:41,010
‫それは､ アニメグラフと呼ばれるものです｡

33
00:02:41,010 --> 00:02:44,610
‫通常のブループリントと同様に､ イベントグラフがあることがわかります｡

34
00:02:44,610 --> 00:02:47,430
‫イベントグラフもありますが､ アニメーショングラフというものもあるそうです｡

35
00:02:47,430 --> 00:02:48,720
‫その話はまた今度｡

36
00:02:48,960 --> 00:02:53,670
‫詳細ペインがあり､ アニメーション・ブループリントの詳細が表示されます｡

37
00:02:53,670 --> 00:02:56,010
‫だから､ 授業自体は､ その詳細がわかるようになっているんですね｡

38
00:02:56,580 --> 00:02:59,490
‫アニメーションのブループリントに対するコンポーネントがないことに注意してください｡

39
00:02:59,490 --> 00:03:01,890
‫それはもう､ ひとつの違いとして注目してください｡

40
00:03:01,890 --> 00:03:08,670
‫アニメートプレビューエディターを使用して､ このプレビューウィンドウでいくつかの作業を行うことができます｡

41
00:03:08,670 --> 00:03:10,560
‫デフォルトで近寄らない理由｡

42
00:03:10,560 --> 00:03:11,310
‫どうだろう｡

43
00:03:11,940 --> 00:03:17,940
‫アセットブラウザは､ アニメーションと同様に､ アニメーションを簡単にエディタに取り込むことができます｡

44
00:03:17,940 --> 00:03:26,190
‫また､ アニメーションやメッシュと同様に､ 右上にあるこのビューで､ スケルトン､ メッシュ､ アニメーション､

45
00:03:26,190 --> 00:03:35,850
‫ブループリントをすばやく切り替え､ 同じスケルトンに依存するすべてのものを表示できます｡

46
00:03:36,490 --> 00:03:42,550
‫次に､ 左下にあるのが私のブループリント・ペインで､ これは私のブループリントとほとんど同じです｡

47
00:03:42,550 --> 00:03:48,300
‫標準的な設計図では､ 関数､ 変数､ マクロなど､ そのようなものは同じです｡

48
00:03:48,310 --> 00:03:49,240
‫何が違うのでしょうか？

49
00:03:49,240 --> 00:03:50,470
‫そうそう､ グラフもありますよ｡

50
00:03:50,470 --> 00:03:51,250
‫それも同じです｡

51
00:03:51,250 --> 00:03:54,970
‫ただ､ 違うのは､ このアニメーショングラフとアニメーションレイヤーです｡

52
00:03:54,970 --> 00:03:57,190
‫さて､ 今回はアニメーションレイヤーについてあまり触れません｡

53
00:03:57,190 --> 00:03:59,230
‫それはもうちょっと高度な機能で､ 私たちには必要ないものです｡

54
00:03:59,230 --> 00:04:06,100
‫しかし､ グラフは､ 実行ノードがないことを除けば､ 設計図のようなもので､

55
00:04:06,130 --> 00:04:13,570
‫グラフの中を流れるデータは何なのでしょうか｡

56
00:04:13,570 --> 00:04:21,040
‫さて､ 基本的には､ キャラクタをモデリングすべき出力ポーズ､ つまり出力アニメーションのポーズを取得しようとしています｡

57
00:04:21,370 --> 00:04:25,900
‫そして､ この結果ノードにさまざまなノードを接続することで､ それを実現するのです｡

58
00:04:25,900 --> 00:04:31,330
‫そして､ その中を流れるように､ 最終的に出力となるデータを得ることができるのです｡

59
00:04:31,720 --> 00:04:38,230
‫例えば､ アニメーションをアニメーショングラフにドラッグすると､ ノードが作成され､

60
00:04:38,230 --> 00:04:44,350
‫出力ピン（アニメーションポーズ）があることがわかります｡

61
00:04:44,350 --> 00:04:54,310
‫そのポーズを出力ポーズにドラッグしてコンパイルを実行すると､ このアニメーション ブループリントが行うことがプレビューに表示されるのがわかります｡

62
00:04:54,310 --> 00:05:01,570
‫基本的には､ この能力アニメーションを再生するだけです｡ 現在行っていることとほぼ同じですが､ アニメーションを直接再生する代わりに､

63
00:05:01,570 --> 00:05:06,880
‫ブループリントを挿入する間に追加のレイヤーを追加しています｡

64
00:05:06,880 --> 00:05:14,560
‫それ自体には特に意味はないのですが､ このポーズに対してできる操作の種類が違うんです｡

65
00:05:14,560 --> 00:05:16,000
‫これで便利になりましたね｡

66
00:05:16,000 --> 00:05:19,570
‫アニメーションのグラフの中で右クリックすると､ いろいろなものがあるのがわかると思います｡

67
00:05:19,750 --> 00:05:26,440
‫ブレンドというものを検索したいのですが､ この中にいくつか種類がありますね｡

68
00:05:26,440 --> 00:05:30,580
‫一番上に欲しい､ 一番便利なものを探してみよう｡

69
00:05:30,610 --> 00:05:36,430
‫ここには､ チャンネル別にブレンドボーン､ ブレンドマルチがあると思います｡

70
00:05:36,430 --> 00:05:38,800
‫標準的なブレンドノードだけが欲しい｡

71
00:05:38,800 --> 00:05:39,760
‫それを取り込もう｡

72
00:05:40,090 --> 00:05:45,580
‫そして､ ここには値があり､ 2つの入力ポーズと1つの出力ポーズがあることがわかります｡

73
00:05:45,580 --> 00:05:49,450
‫そこで､ 2つの異なるアニメーションをドラッグすることができます｡

74
00:05:50,100 --> 00:05:52,040
‫そして､ それを貼り付けることができるのです｡

75
00:05:52,050 --> 00:05:53,490
‫こちらはアディショナルアニメーションです｡

76
00:05:53,490 --> 00:05:54,540
‫それを持ち込みたくないんです｡

77
00:05:54,540 --> 00:05:55,880
‫それだと､ 私たちは混乱してしまいます｡

78
00:05:55,890 --> 00:05:58,560
‫実際に使いそうなアニメーションを使ってみましょう｡

79
00:05:58,560 --> 00:06:01,920
‫だから､ 前振りを見ていたのです｡

80
00:06:01,920 --> 00:06:02,760
‫ジョグがあるんです｡

81
00:06:02,760 --> 00:06:06,030
‫ウォーキングよりもジョギングがいいかもしれませんね｡

82
00:06:06,030 --> 00:06:09,360
‫では､ ジョグフォワードを少し見てみましょう｡

83
00:06:09,360 --> 00:06:15,900
‫それをブレンドして､ もうひとつはジョグバックをブレンドするのもいいかもしれませんね｡

84
00:06:15,900 --> 00:06:23,700
‫ジョグを探すと､ ジョグ､ ジョグB､ これはバックワード､ フォワード､ バックワードの略だと思います｡

85
00:06:23,970 --> 00:06:28,470
‫これらをブレンドノードに取り込み､ 出力して､ どのような結果になるかを見てみましょう｡

86
00:06:28,470 --> 00:06:35,880
‫コンパイルを押すと､ アルファを1つ上にくっつけてからリコンパイルすると､ ジョギングで進んでいるのがわかりますね｡

87
00:06:35,880 --> 00:06:50,310
‫プレビューを実行しながら､ どのノードからデータが流れているかを確認することもできます｡

88
00:06:50,340 --> 00:06:53,430
‫A αが両者の間に混ざり合うから｡

89
00:06:54,030 --> 00:07:00,720
‫0ができるようになった｡  5をアルファ上に､ またはその間の任意の位置に設定すると､ 両方のアニメーションを再生し､

90
00:07:00,720 --> 00:07:03,840
‫それらを互いに重ね､ 両方の半分ずつを再生します｡

91
00:07:03,840 --> 00:07:10,740
‫また､ ジョギングで前進と後退を同時に行う場合､ 明らかに少しおかしいと思われませんか？

92
00:07:10,740 --> 00:07:17,190
‫そこで､ ジョグを削除して､ 代わりにアイドルアニメーションを入れることにします｡

93
00:07:17,460 --> 00:07:19,530
‫では､ どこにアイドルがいるのか？

94
00:07:21,620 --> 00:07:24,890
‫このアイドル非戦闘員を選択して､ ここに持ってきます｡

95
00:07:25,520 --> 00:07:31,200
‫50%になると､ 非戦闘時のアイドリングのようなことが起こるはずです｡

96
00:07:31,220 --> 00:07:34,880
‫その半分か､ 半分､ そしてジョグの半分｡

97
00:07:34,880 --> 00:07:38,870
‫一方､ 1にしておけば100%になる｡

98
00:07:39,540 --> 00:07:40,200
‫アイドル｡

99
00:07:41,250 --> 00:07:41,910
‫ゼロです｡

100
00:07:41,940 --> 00:07:44,040
‫100％ジョグをすることになる｡

101
00:07:44,520 --> 00:07:47,280
‫さて､ これは理想的ではありません｡

102
00:07:47,280 --> 00:07:49,950
‫このαを変更し続けることで､ リコンパイルを打たないといけないこと｡

103
00:07:49,950 --> 00:07:53,490
‫そこで､ ブループリントに変数を追加することができます｡

104
00:07:53,490 --> 00:08:00,780
‫これは float である必要があるので､ 先に進み､ 詳細ペインで変数のタイプを float に変更します｡

105
00:08:01,050 --> 00:08:05,730
‫そして､ これをブレンド量に変更します｡

106
00:08:06,870 --> 00:08:18,630
‫次に､ これをドラッグして､ ブループリントからアニメグラフに変数をドラッグし､ いくつかのピンにフックしてコンパイルを実行します｡

107
00:08:18,630 --> 00:08:21,360
‫そして､ アニメのプレビューエディタに戻ります｡

108
00:08:21,360 --> 00:08:23,100
‫表示されているのがわかると思います｡

109
00:08:23,100 --> 00:08:26,370
‫ここで作成したブレンド量と同じような変数です｡

110
00:08:26,520 --> 00:08:35,160
‫つまり､ 実行時にそれをずらせば､ 何が起こっているのかを確認し､ プレビューすることができるのです｡

111
00:08:35,160 --> 00:08:40,470
‫そして､ 基本的には､ ゲームがアニメーション設計図の変数を動かして､

112
00:08:40,470 --> 00:08:46,830
‫再生中の特定の時点で適切な種類のアニメーションを取得することになります｡

113
00:08:46,860 --> 00:08:50,580
‫それは､ このセクションの後半で少し扱うことになるものです｡

114
00:08:50,580 --> 00:08:57,480
‫しかし､ 今は､ ここに適切な種類の変数があるときに､ このアニメーションを正しく表示することを試みます｡

115
00:08:58,790 --> 00:09:00,610
‫だから､ ちょっとしたチャレンジの時期なんです｡

116
00:09:00,620 --> 00:09:06,730
‫アニメーションのブループリントをセットアップして､ アニメーショングラフで遊べるかどうか確認してみてください｡

117
00:09:06,740 --> 00:09:09,050
‫そこで､ もう1つブレンドを追加してほしいのです｡

118
00:09:09,050 --> 00:09:11,000
‫順番に足していくんです｡

119
00:09:11,000 --> 00:09:12,800
‫まずは1回ブレンドをするんですね｡

120
00:09:12,800 --> 00:09:18,020
‫出力は次のブレンドの入力に入ります｡

121
00:09:18,020 --> 00:09:25,580
‫次に､ 右や左に動くなど意味のあるアニメーションを選択して､

122
00:09:25,580 --> 00:09:36,140
‫意味のある変数を追加します｡

123
00:09:36,320 --> 00:09:37,940
‫ビデオを一時停止して､ 試してみてください｡

124
00:09:37,940 --> 00:09:41,690
‫これらのブレンドで､ アニメグラフの意味を理解できるかどうか､ 遊んでみてください｡

125
00:09:43,170 --> 00:09:43,980
‫やあ､ お帰りなさい｡

126
00:09:44,010 --> 00:09:46,160
‫というわけで､ 少しは楽しんでいただけたでしょうか？

127
00:09:46,170 --> 00:09:48,960
‫もう1つのブレンドノードを追加していきます｡

128
00:09:48,960 --> 00:09:51,630
‫そこでblendで検索して､ 上にスクロールしてください｡

129
00:09:51,630 --> 00:09:54,470
‫これはなぜか､ 私の画面のスケーリングと関係があるのかもしれません｡

130
00:09:54,480 --> 00:09:58,260
‫それをブレンドして渡りに船と行こう｡

131
00:09:58,290 --> 00:10:00,270
‫このアイドルアニメーションをご覧ください｡

132
00:10:00,270 --> 00:10:01,140
‫自分はどうしたいのか？

133
00:10:01,170 --> 00:10:05,460
‫左に動かしてもらいたいと思う｡

134
00:10:05,460 --> 00:10:14,160
‫そこで､ アセットブラウザで「jogging」を探し､ 「jogging left」のアニメーションを探してみることにします｡

135
00:10:14,310 --> 00:10:18,180
‫ところで､ ブレンドが理想的な方法でないことは承知しています｡

136
00:10:18,180 --> 00:10:29,730
‫次回の講義では､ ブレンドスペースと呼ばれるものを使って､ 動きのあるアニメーションを自動的にうまくブレンドする方法を紹介します｡

137
00:10:29,730 --> 00:10:34,470
‫しかし､ これはより複雑なことに飛び込む前に､ アニメーション・グラフのアイデアを得るためにやっていることなのです｡

138
00:10:34,740 --> 00:10:41,280
‫だから､ 左と前の間をブレンドすることになるんだ｡

139
00:10:42,170 --> 00:10:50,240
‫そこで､ ここを左にして､ 前方をコピーしたり､ カットしたり､ ここに移動させたりするのです｡

140
00:10:50,870 --> 00:10:59,930
‫そして､ ブレンドの出力にあるそれを､ 次のブレンド､ つまりアイドリングをするかしないかの入力にパッチするのです｡

141
00:11:00,260 --> 00:11:01,280
‫これは本当に意味があるのでしょうか？

142
00:11:01,280 --> 00:11:02,570
‫変数を考えよう

143
00:11:02,570 --> 00:11:04,220
‫変数の名前はどうすればいいのでしょうか？

144
00:11:04,220 --> 00:11:09,560
‫フォワードと呼ばれるものがありますね｡

145
00:11:10,750 --> 00:11:18,910
‫前方だけというのは非常にシンプルで､ 左のアニメーションを選ぶので､ 右か左かと呼ばれるものです｡

146
00:11:18,940 --> 00:11:20,170
‫また､ 浮き輪にもなる｡

147
00:11:20,380 --> 00:11:26,440
‫だから､ ブレンドのどちらかが､ 前に進むか､ 動かないかの選択をする必要がある｡

148
00:11:26,440 --> 00:11:32,110
‫ということで､ 最初のブレンドはこれでいこうと思います｡

149
00:11:33,120 --> 00:11:42,990
‫アルファ値がゼロのとき､ 前進を1とすると､ アイドルの戦闘は1では動かないように､ aにフックする予定です｡

150
00:11:43,140 --> 00:11:45,990
‫そのフォワード変数を1つでアルファにフックしてみましょう｡

151
00:11:45,990 --> 00:11:52,620
‫前進して､ それを左移動のゼロに持っていくんです｡

152
00:11:53,920 --> 00:12:03,760
‫その左の変数をムービングレフトのゼロでフックし､ ムービングレフトの1では､ Bでフックするつもりです｡

153
00:12:04,060 --> 00:12:07,150
‫それをコンパイルすると､ ちょっと散漫な感じになるわけです｡

154
00:12:07,150 --> 00:12:08,530
‫でも､ わかってもらえるといいんですけどね｡

155
00:12:08,530 --> 00:12:15,400
‫アニメーションのプレビューエディターで､ 前に移動するとジョギングが始まり､ それをリセットして､

156
00:12:15,400 --> 00:12:19,840
‫左に移動すると左に移動し始めるのがわかります｡

157
00:12:20,080 --> 00:12:25,180
‫そして決定的なのは､ もし私たちが両方とも左に移動してジョギングを始めた場合です｡

158
00:12:26,180 --> 00:12:28,970
‫ここでは､ その両方が混在していると見るべきでしょう｡

159
00:12:28,970 --> 00:12:30,770
‫その前方がブレンドされるようになったのです｡

160
00:12:30,770 --> 00:12:36,320
‫左をもう少し少なく､ 50％にする必要がある場合､ 私がちょっと動いているのがわかると思います｡

161
00:12:36,320 --> 00:12:37,460
‫変な感じのアニメですね｡

162
00:12:37,460 --> 00:12:45,530
‫特にうまくブレンドされているわけではありませんが､ ジョグ・レフトとジョグ・フォワードの両方を再生しているのがわかると思います｡

163
00:12:45,530 --> 00:12:50,660
‫先ほど述べたように､ これらの変数はほぼそのままにして､ 実際にブレンドを行うメカニズムをより意味のあるものに変更し､

164
00:12:50,660 --> 00:13:01,700
‫アセットブラウザで表示されているジョギング前進､ ジョギング後退､ ジョギング左などのアニメーションをもっと使用するようにします｡

165
00:13:01,700 --> 00:13:03,650
‫しかし､ それはすべて次の講義のテーマです｡

166
00:13:03,650 --> 00:13:09,770
‫今回は､ アニメーションの設計図とアニメーショングラフの仕組み､ そしてそもそもなぜアニメーショングラフがあるのかについて､

167
00:13:09,770 --> 00:13:11,450
‫ほぼ網羅的に説明しました｡

168
00:13:11,450 --> 00:13:14,540
‫それでは､ 次回の講義でまたアニメーションでお会いしましょう｡