WEBVTT

1
00:00:00.280 --> 00:00:02.980
みなさん、Godotチュートリアルにお帰りなさい。

2
00:00:03.000 --> 00:00:08.300
今日は、ゲーム開発とGodotを使った作業の中で、私が最も好きな部分の一つである、キャラクタのアニメーションについてお話します。

3
00:00:08.400 --> 00:00:14.160
今回の作業ではスプライト・シートを使います。アニメを表現するために、シートを一連のコマに分割します。

4
00:00:14.200 --> 00:00:16.800
これを「サイクル」とか「アニメーション・サイクル」とか呼んでいます。

5
00:00:17.250 --> 00:00:22.150
Godotには、こういったものを作成、管理、整理できる素晴らしいツールが備わっています。

6
00:00:22.200 --> 00:00:23.800
それが「アニメーション・プレイヤー」です。

7
00:00:24.300 --> 00:00:26.000
Godotには他にもいくつかの方法があります。

8
00:00:26.000 --> 00:00:30.279
「アニメイティッド・スプライト」というノードや、他にもいくつか。

9
00:00:30.700 --> 00:00:36.900
しかし、アニメーション・プレイヤーはすぐに私のお気に入りになりました。というのも、私はたくさんのアニメーションを作るのが好きで、そのためには整理整頓が必要ですから。

10
00:00:36.900 --> 00:00:41.140
さらに、アニメーション・プレイヤーには、使いやすく、遊びやすい、とても素晴らしいUIが備わっています。

11
00:00:41.140 -->  00:00:43.160
今日はそれを皆さんにお見せできるのが楽しみです。

12
00:00:43.500 --> 00:00:47.640
ところで、初めての方へ。私の名前はドリュー、ゲーム開発のノウハウを教えています。

13
00:00:47.680 --> 00:00:50.280
もしあなたがゲーム作りに興味があるなら、ぜひサブスクライブ・ボタンを押してくださいね。

14
00:00:50.730 --> 00:00:53.830
それでは早速、実際に使用するキャラクターを作ってみましょう。

15
00:00:53.900 --> 00:00:56.199
いつものように、シーンのプラス・ボタンを押してください。

16
00:00:56.400 --> 00:00:58.699
「その他のノード」を選択します。

17
00:00:58.748 --> 00:01:01.449
前に見たように、キネマティック・ボディ2D(KinematicBody2D)を探して作成します。

18
00:01:01.500 --> 00:01:03.900
これは、画面内を動き回るキャラクターに適しているノードです。

19
00:01:04.000 --> 00:01:09.009
今日は物理的な動きをすることはあまりありませんが、アニメーションをすることが多いので、これが一般的です。

20
00:01:09.009 -->  00:01:13.210
キネマティック・ボディ2Dは、ゲーム内のキャラクターを作るのに必要です。

21
00:01:13.800 --> 00:01:16.440
以前と同じように、いくつかのレイヤーを追加します。

22
00:01:16.440 -->  00:01:19.800
ボディ同士の衝突に関する警告は無視します。今日はその必要はありません。

23
00:01:20.000 --> 00:01:23.200
では、2つのレイヤーを追加しましょう。1つはスプライト用です。

24
00:01:23.500 --> 00:01:29.500
これはキャラクターの実際の外観のようなもので、もう一つは別のスプライトのために用意します。

25
00:01:30.220 --> 00:01:36.200
これはキャラクターの影を表すためのものです。これらを適切にレイヤー化していきます。

26
00:01:37.000 --> 00:01:42.399
いつものように、画像をいくつか用意しておきました。まずはこれを「キャラクター」として保存しましょう。

27
00:01:43.300 --> 00:01:46.700
この動画のために、いくつかの画像が用意してあります。

28
00:01:47.089 --> 00:01:52.230
気をつけなければいけませんね。私は最近の説明の中で、「ダウンロード用の画像」と言ったまま、何もしていませんでした。

29
00:01:52.230 -->  00:01:56.060
今すぐダウンロードして私と一緒に作業したい方のために、画像へのリンクを説明欄に入れておきますね。

30
00:01:56.450 --> 00:02:01.670
まず最初に、スプライト・レイヤーを選択すると、ここに空のテクスチャスロットが現れます。

31
00:02:01.970 --> 00:02:06.800
準備したアセットの1つである「DemoRpgCharacter.png」を取り出して、テクスチャに配置します。

32
00:02:07.100 --> 00:02:09.100
これで画面に表示されます。

33
00:02:09.400 --> 00:02:12.200
これまでGodotのチュートリアル動画を見てくれた方は、

34
00:02:12.200 --> 00:02:18.920
扱っている画像が１枚のセルのような、つまり１つの画像しかないものを見てきたと思います。

35
00:02:19.210 --> 00:02:22.710
ここで扱うのはスプライト・シートで、同じキャラクターの様々なフレームが含まれています。

36
00:02:22.990 --> 00:02:27.090
デフォルトでは、Godotはスプライト・シートが使われることを知りません。

37
00:02:27.109 --> 00:02:30.109
そこで必要なのは、ここでスプライトを設定することです。

38
00:02:30.109 --> 00:02:36.240
アニメーションの帯状の部分がありますが、このアセットの大きさをGodotに伝える必要があります。

39
00:02:36.920 --> 00:02:43.220
その方法は、行と列、またはVフレームとHフレーム、つまり縦と横で指定します。

40
00:02:43.400 --> 00:02:49.900
このアセットでは、水平に５行あります。そこで、縦方向(Vframe)には「５」と入力します。

41
00:02:50.490 --> 00:02:55.799
そうすると、Godotがこのアセットをトリミングしてくれるのがわかりますね。

42
00:02:56.000 --> 00:02:59.900
そして、垂直には４列です。

43
00:02:59.900 --> 00:03:02.500
横方向(Hframe)に「４」と入力します。

44
00:03:02.700 --> 00:03:07.200
これで、キャラクターが希望通りのサイズで表示されました。

45
00:03:08.100 --> 00:03:11.400
ここで、たまに間違った値で遊んでみるのも面白いかもしれませんね。

46
00:03:11.400 -->  00:03:17.459
もし、これが完全な正方形ではないような変な感じがしたら、正しい値が入っていない可能性があることがわかります。

47
00:03:17.470 --> 00:03:22.770
何かおかしいと思ったら、これらの値を再確認してみてください。使用しているアセットと一致しているかどうかを確認してください。

48
00:03:23.519 --> 00:03:25.019
キャラクターにズームインしてみましょう。

49
00:03:25.019 -->  00:03:28.100
そして、影を追加していきます。ここで、Shadowレイヤーを選択します。

50
00:03:28.100 -->  00:03:32.390
すでに選択されているので、影が描かれた画像をテクスチャに引き込みます。

51
00:03:32.700 --> 00:03:34.500
この影はスプライト・シートではありません。

52
00:03:34.500 --> 00:03:37.100
これは32×32ピクセルの1フレームです。

53
00:03:37.100 --> 00:03:40.700
ですから、キャラクターのスプライト・シートの1フレームにぴったりと合わせることができます。

54
00:03:41.100 --> 00:03:44.700
さて、次のステップは、アニメーション・プレーヤというノードを導入することです。

55
00:03:44.710 --> 00:03:46.410
これが今日の主役です。

56
00:03:46.600 --> 00:03:50.000
子ノード追加ボタンを押して「Animation Player」を検索してみましょう。

57
00:03:50.000 --> 00:03:52.700
いくつかヒットしましたが、やはりアニメーション・プレーヤが欲しいところですね。

58
00:03:53.100 --> 00:03:56.100
このノードを作成すると、スプライトとシャドウのすぐ隣に置くことができます。

59
00:03:56.400 --> 00:04:03.230
アニメーション・プレーヤについて簡単に説明しましょう。これをクリックすると、新しいエリアができます。これはアニメーション・プレーヤのワークスペースのようなものです。

60
00:04:03.500 -->  00:04:11.660
ここにはドロップダウンがあり、現在は何もありませんが、アニメーション・サイクルを作成して、シーン・ツリー内の好きなものに適用することができます。

61
00:04:12.120 --> 00:04:15.020
そこで、「アニメーション」をクリックし、「新規」を選びます。

62
00:04:15.320 --> 00:04:17.420
「Walk down」という名前を付けましょう。

63
00:04:18.620 --> 00:04:25.599
そうすると、下の方にタイムラインのようなものが出てきますが、アニメーション・プレーヤがどのような機能を持っているかというと、

64
00:04:25.789 --> 00:04:34.840
任意のノードを選択し、そのノードのプロパティに、ノードの値を時系列でプロットすることができます。

65
00:04:35.340 -->  00:04:41.289
あるスプライトで考えてみましょう。スプライト・シートの左上のフレームであるフレーム0から開始しています。

66
00:04:41.700 --> 00:04:43.700
しかし、時間の経過とともに、フレーム0を表示したいとします。

67
00:04:43.740 --> 00:04:47.900
フレーム1、フレーム2、もしかしたらフレーム1に戻って、全体をやり直したい。

68
00:04:48.200 --> 00:04:49.650
今日はそれを体験してみましょう。

69
00:04:50.040 --> 00:04:55.400
そのためには、トラックを追加して、種類をプロパティ・トラックに指定します。

70
00:04:55.740 --> 00:04:59.979
最初のステップは、プロパティにアニメーションを持たせたいノードを選択することです。

71
00:05:00.100 --> 00:05:02.000
ここでは、Spriteを選択しています。

72
00:05:02.500 -->  00:05:07.680
しかし、ここでは何でも選択できるので、これらのツールが非常に強力なものになっていることに気づくでしょう。

73
00:05:07.680 -->  00:05:09.479
では、選択し、OKをクリックします。

74
00:05:09.979 --> 00:05:14.859
次の問は、スプライトのどのプロパティを時間経過とともにアニメーションさせたいかです。

75
00:05:15.500 --> 00:05:21.300
繰り返しになりますが、インスペクタで通常操作できるものはすべてここで見ることができます。

76
00:05:21.800 --> 00:05:30.640
先ほど言ったように、フレームを使うだけで、新しいトラックができあがります。ビデオ編集やオーディオ編集のようなものですね。

77
00:05:30.840 --> 00:05:36.500
この新しいトラックを右クリックしてキーを挿入し、さまざまなポイントを作成します。

78
00:05:37.020 --> 00:05:42.440
作成したポイントの1つを選択すると、インスペクタにその値が表示されます。

79
00:05:42.440 -->  00:05:45.059
このポイントのフレームの値はゼロです。

80
00:05:45.099 --> 00:05:53.460
次に別のキーを挿入し、2つ目のポイントを選択します。先に進んで、スプライト・シートの最初のフレームの値を1に変更します。

81
00:05:53.500 --> 00:05:57.380
繰り返しになりますが、左上から始まり、右に向かって、下に向かって数えていきます。

82
00:05:57.400 --> 00:05:59.900
つまり、「1」は1つ目のフレームの右にあるものです。

83
00:06:00.500 --> 00:06:09.490
タイムラインの最後のステップにカーソルを置くと、キャラクターが最初のフレームに更新されることがわかります。

84
00:06:09.920 --> 00:06:13.220
カーソルをドラッグすると、フレームが変化しているのがわかります。

85
00:06:13.500 --> 00:06:16.200
それではここで、次のいくつかのフレームを追加してみましょう。

86
00:06:19.200 --> 00:06:22.500
これが2と3になります。

87
00:06:22.900 --> 00:06:26.200
カーソルをドラッグすると、フレームが変化するのがわかります。

88
00:06:26.300 --> 00:06:30.900
また、この再生ボタンを押すと、アニメーションが1回再生されます。しかし、これは歩くサイクルです。

89
00:06:30.900 -->  00:06:32.360
だから、繰り返したいですね。

90
00:06:32.660 --> 00:06:37.800
そこで、この小さなループボタンをクリックすると、再生時に歩行が常に繰り返されるようになります。ループボタンをクリックしてください。

91
00:06:38.210 --> 00:06:41.710
ここで少しズームインしてみると、次のようになります。

92
00:06:42.050 --> 00:06:49.159
アニメーションは、タイムライン上でハイライトされている部分の長さになりますが、マイナスの空きスペースがたくさんあります。

93
00:06:49.780 --> 00:06:58.720
そこで、これを使って、リミットをより希望に近いものに変更してみます。

94
00:06:59.950 --> 00:07:03.650
そして、最後のフレームの後にも同じ量のネガティブスペースがあります。

95
00:07:03.720 --> 00:07:06.220
では、冒頭に巻き戻して再生ボタンを押してみましょう。

96
00:07:06.420 --> 00:07:09.720
キャラクターが走り出して、それが均等に繰り返されているのがわかります。

97
00:07:10.880 --> 00:07:14.880
これは私が意図したよりも少し速いので、先に進んでもう少し間隔を空けてみましょう。

98
00:07:15.620 --> 00:07:18.830
ここに移動して、うまく均等になるようにします。

99
00:07:19.849 --> 00:07:23.849
そして、長さをどこまでも伸ばしていきます。

100
00:07:24.940 --> 00:07:26.840
これで少しは自然なペースになりました。

101
00:07:27.400 --> 00:07:31.099
コードを使ってアニメーションの速度を変えることもできますが、

102
00:07:31.099 -->  00:07:34.159
今日のチュートリアルのために、シンプルにしておきたいと思います。

103
00:07:34.730 --> 00:07:37.830
さて、ここまででスプライト・シートを使った最も基本的なアニメーションを説明してきました。

104
00:07:37.980 --> 00:07:40.780
これで十分だと思います。でも、もうちょっと楽しんでみましょう。

105
00:07:41.070 --> 00:07:43.670
このシーンにもう一つレイヤーを追加してみましょう。

106
00:07:43.800 --> 00:07:45.700
スプライトをもう一つ追加します。

107
00:07:46.300 --> 00:07:48.600
今回はこのスプライトを「Hat」と名付けます。

108
00:07:49.640 --> 00:07:53.850
きちんとかぶらせるために、帽子をスプライトのすぐ上に移動させます。

109
00:07:54.070 --> 00:07:56.870
これからすることは、その帽子に別のスプライトシートを追加することです。

110
00:07:57.620 --> 00:08:01.720
帽子画像を選択して、テクスチャを表示、それからドラッグして帽子を追加します。

111
00:08:02.770 --> 00:08:05.270
少しズームアウトしてみましょう。

112
00:08:05.590 --> 00:08:13.320
帽子のスプライト・シートは、幅が4、高さが1行になっています。それでは、インスペクタにこの値を入力してみましょう。

113
00:08:13.680 --> 00:08:15.480
縦方向のフレームは1つのままです。

114
00:08:15.500 --> 00:08:17.380
方向横のフレームは4つにしましょう。

115
00:08:17.690 --> 00:08:22.240
ここでもう一度、帽子がキャラクターに直接はめ込まれているのがわかりますが、動きません。

116
00:08:22.438 --> 00:08:25.539
ほら、キャラクターの頭は上下に揺れていますが、帽子は止まったままです。

117
00:08:25.539 -->  00:08:27.890
それでは、キャラクターと一緒に帽子もアニメーションさせてみましょう。

118
00:08:28.260 --> 00:08:31.260
フレームをアニメーションさせることができるのはすでに見たとおりです。素晴らしいですね。

119
00:08:31.340 --> 00:08:36.340
しかし、先ほど言ったように、何でもアニメートできるのです。そこで、新しいトラック、プロパティトラックを追加します。

120
00:08:36.340 --> 00:08:42.400
まず最初の問ですが、シーン内のどのノードをアニメーションさせたいのか、今回は帽子を考えています。そこで、"Hat"をクリックします。

121
00:08:42.799 --> 00:08:45.699
そうするとGodotは、帽子のプロパティのうち、どれをアニメートしたいか尋ねてきます。

122
00:08:45.819 --> 00:08:49.319
今回は「位置」と答えましょう。

123
00:08:51.350 --> 00:08:54.650
そうすると、タイムラインに新しいトラックができます。

124
00:08:54.790 --> 00:08:56.390
今回は「帽子の位置」です。

125
00:08:56.400 --> 00:08:59.290
これは、すべてのものがどこにあるかを整理されていてわかりやすいですね。

126
00:08:59.570 --> 00:09:01.970
おかしくなる前に、この作業をやめておきますね。

127
00:09:02.510 --> 00:09:05.210
ここで右クリックして、新しいキーを挿入します。

128
00:09:05.380 --> 00:09:11.000
今回はフレームを扱う前だったので、その値は今表示されているはずのフレームの番号と同じです。

129
00:09:11.819 --> 00:09:15.819
位置については、Godotは2Dベクトル型であることを知っていますから、

130
00:09:16.020 --> 00:09:24.520
位置トラックのタイムライン上にあるストップをインスペクタで検査すると、位置情報が表示されています。ベクトル2Dには、X値とY値があります。

131
00:09:24.820 --> 00:09:27.220
これを使って、時間の経過とともに変化させましょう。

132
00:09:27.580 --> 00:09:31.720
最初のステップでは、画面に表示されているものが正しく見えるので、現在の位置に保持します。

133
00:09:32.020 --> 00:09:34.520
もう1つ挿入して、別の数でやってみましょう。

134
00:09:35.020 --> 00:09:42.980
スプライトシートの仕組みは、キャラクターが前に踏み出すと、頭が1ピクセル下がり、Yに1と表示されます。

135
00:09:43.910 -->  00:09:49.270
そして3つ目のフレームでは一番上に戻っているので、デフォルトの(0,0)のままにしておきます。

136
00:09:49.620 --> 00:09:55.520
しかし、4つ目のフレームは先に進み、1に変更します。これは、スプライト・シートがどのように機能するかということでもあります。頭が上下に揺れていますね。

137
00:09:56.300 --> 00:10:02.199
カーソルを移動させると、頭の部分は実際には、ループモードでアニメーションを再生します。

138
00:10:02.439 --> 00:10:06.209
帽子は上下に揺れますが、何かおかしなことが起きているようです。

139
00:10:06.209 --> 00:10:11.500
もう少しだけ拡大してみてください。帽子の位置が次の場所にアニメーションしているのがわかります。

140
00:10:11.540 --> 00:10:12.640
ただそこにジャンプしているだけではありません。

141
00:10:13.000 --> 00:10:18.600
もし、イラストのようなキャラクターで、もっとバブリーな感じのゲームを作っていたら、これは適切かもしれませんが、

142
00:10:18.640 -->  00:10:24.170
ピクセルアートの私たちには、なんだかファンキーで変な感じがして、ちょっと怖くなってしまいます。

143
00:10:24.200 --> 00:10:27.400
そこで、ここはすぐに止めてしまいましょう。

144
00:10:28.520 --> 00:10:30.720
各トラックには、横に小さなドロップダウンがあります。

145
00:10:30.740 --> 00:10:34.240
前のフレームはすでにこの値がデフォルトになっています。

146
00:10:34.240 --> 00:10:45.220
しかし、帽子の位置のトラックは、トランジションタイプの連続にデフォルト設定されていて、基本的には0から1に向かっている場合、そこまでずっとアニメーションすることになっています。

147
00:10:45.220 --> 00:10:47.520
そして、0から1の間のすべてのサブポイントを取得します。

148
00:10:47.660 --> 00:10:51.360
私たちはそんなことは望んでいません。ただ、ノードの停止位置で0から1にジャンプしたいだけです。

149
00:10:51.770 --> 00:10:55.270
そこで、「Discrete」を選択します。どうでしょうか。

150
00:10:55.730 --> 00:10:59.930
帽子がキャラクターと一緒に動いているのがわかると思います。もう一度再生してみましょう。

151
00:11:00.750 --> 00:11:07.970
これで本物のアニメーションのようになりました。これはとてもクールです。帽子が別のレイヤーになっているので、オンとオフを切り替えることができます。

152
00:11:08.600 --> 00:11:10.600
ゲームの中で、帽子をアンロックできるとします。

153
00:11:10.600 --> 00:11:15.640
帽子を持っていれば、その帽子をオンにするだけですし、別の帽子を手に入れたければ、別の帽子を探せばいいのです。

154
00:11:15.640 --> 00:11:20.800
この帽子レイヤーのテクスチャーを変更するだけで、すでにアニメーションの設定が完了しています。

155
00:11:21.500 --> 00:11:26.829
以上で、アニメーション・プレーヤーに関する2つの動画の前半が終わりました。このあとすぐにパート2に突入します。

156
00:11:26.959 --> 00:11:32.380
次回は、さまざまな種類のアニメーションを追加したり、アニメーションプレーヤー自体にさまざまな機能を持たせることについて学びます。

157
00:11:32.700 --> 00:11:37.340
これまで、スプライトフレームとポジショニングについて説明してきましたが、これらは非常に強力です。

158
00:11:37.500 --> 00:11:40.300
しかし、このプレーヤーはそれ以上のことができます。特定のポイントでコードを発射することもできます。

159
00:11:40.300 --> 00:11:42.100
効果音を鳴らすこともできます。たくさんのことができます。

160
00:11:42.420 --> 00:11:44.820
次の動画では、そのような機能についてご紹介します。

161
00:11:45.300 --> 00:11:49.910
ご覧いただきありがとうございました。前にも言いましたが、ゲーム開発に興味のある方はぜひサブスクライブを。

162
00:11:49.910 -->  00:11:52.480
ここで何かを学んでくれたら、「いいね！」ボタンを押してくれると本当に嬉しいです。

163
00:11:52.880 --> 00:11:59.680
そして、もしあなたが自分でゲームを作っているなら、ぜひ私たちのDiscordに参加してください。インディーゲームを作ったり遊んだりしている人たちのコミュニティがあります。

164
00:11:59.700 --> 00:12:01.900
もしあなたがそういうことに興味があるなら、ぜひ私たちと一緒に遊んでください。

165
00:12:02.079 --> 00:12:04.379
それでは、また。どうもありがとうございました。次の動画でお会いしましょう。