YouTube Drew Conley 2020年08月10日より。
ハイライト：
-
キャラクタを右に向かせる
-
帽子を脱いだりかぶったりできるようにする
Animate Sprite Sheets in Godot using AnimationPlayer (beginner tutorial) PART 2
| 00:00 | Hey, and welcome back to part 2 of our video series about the Godot AnimationPlayer. | さて、Godot AnimationPlayerに関する動画シリーズのパート2へようこそ。 |
| 00:05 | This time, what we're going to do is build on what we did in the first video where we made this lockdown animation. | 今回は、最初の動画で行ったウォーク・ダウンのアニメーションをベースにして次のことを行います。 |
| 00:10 | And we added a hat and a hat kind of bobs around with the player. | 前回は、帽子を追加して、プレイヤーと一緒に帽子が揺れるようにしました。 |
| 00:13 | What we're going to do this time is allow the character to move to a different direction. | 今日は、キャラクターが別の方向に移動できるようにしてみましょう。 |
| 00:17 | And then also we're going to add more of a non cyclical animation like one where the character just puts on the hat or takes the hat off. | さらに、キャラクターがただ帽子を被ったり脱いだりするような、繰り返しループではないアニメーションを追加します。 |
| 00:24 | So let's expand a little bit on what we did last time. | それでは、前回の内容を少し発展させてみましょう。 |
| 00:27 | Here we have our walking down animation. | これは、歩いてこちらに向かってくる時のアニメーションです。 |
| 00:29 | He's marching in place. It's great. | その場で行進しています。なかなかいいですね。 |
| 00:31 | What I'm going to do is add another track to our hat, actually, something I kind of forgot to do last time, but we're going to address it now anyway. | これから帽子に別のトラックを追加します。実は前回やり忘れたことがあるのですが、とりあえず今からやってみましょう。 |
| 00:38 | So on our hat, I'm going to make another track. | 帽子にトラックを追加します。 |
| 00:41 | We'll select hat, and then which property we want to animate this time we're also going to do frame like we did for the character Sprite. | 帽子を選択して、アニメーションさせたいプロパティを、今回はキャラクターのスプライトに施したようにフレームにします。 |
| 00:48 | That's because our hat Sprite sheet has 4 different frames to it. | 帽子のスプライトシートには、4つの異なるフレームがあるからです。 |
| 00:52 | And so when we're going to turn the character to the right instead of looking down, we need to rotate the hat as well. | というのも、キャラクターを正面から見るのではなく右に向ける場合は、帽子も回転させる必要があります。 |
| 00:58 | And so, just to do a little bit of pre work and you'll see why in a little bit. | ちょっとした事前準備をするだけで、その理由が少しずつ見えてきます。 |
| 01:02 | I'm going to add a new frame here. | ここに新しいフレームを追加してみましょう。 |
| 01:04 | And this time I'm going to make sure that it defaults to zero. | 今回は、デフォルトが0であることを確認しておきます。 |
| 01:07 | The reason that's important is because to make a new right side animation, you could make a new animation and recreate everything we've already done. | なぜこれが重要かというと、右向き用の新しいアニメーションを作るには、新規作成の後、今までやったことを全部やり直せばいいのですが、 |
| 01:17 | But that can be kind of tedious. | しかし、それはちょっと面倒です。 |
| 01:18 | So what I prefer to do is just duplicate what I've done. | そこで私がやりたいのは、今までやったことを再現することです。 |
| 01:20 | And so what I'm going to duplicate, I try to get as much done ahead of time; | 複製するものは、できるだけ先に済ませておくようにしています。 |
| 01:24 | so that I don't have to redo work in multiple animations after I read the duplication. | 複製を読み込んだ後に、複数のアニメーションで作業をやり直す必要がないようにするためです。 |
| 01:28 | So to do that, I'm going to say animation and duplicate. | そのためには、「アニメーション」と「複製」を選択します。 |
| 01:33 | And now you see that this drop down where we select which animation we're looking at. | そして、このドロップダウンで、どのアニメーションを見るかを選択します。 |
| 01:37 | We have 2 of them walk down, which is the first one we made and then walk down copy. | 最初に作ったものと、コピーの2つがあります。 |
| 01:42 | So I'll Select copy. And then if I hit animation again, you can rename it. | そこで、「コピー」を選択します。もう一度「アニメーション」を選択すると、名前の変更ができます。 |
| 01:46 | We'll call it something like Walk-, Right. | ここでは "Walk-Right"のようにします。 |
| 01:51 | Now, I'll just grab these duplicated frames and modify them to what we need. | さて、この複製されたフレームを取り出して、必要なものに修正します。 |
| 01:54 | So when we were working on the down animation, we needed frame zero, one, 2, and 3. | ウォーク・ダウンのアニメーションを作っていたときは、キャラクタのフレーム0、1、2、3が必要でした。 |
| 01:59 | But our right strip part of the strip, we'll start on frame number 4 and go up from there. So I'll change this one to 4. | しかし、右向き用の横並びの部分は、フレーム番号4から始めて、そこから進んでいきます。そこで、このフレームを4に変更します。 |
| 02:07 | Next one, five. | 次は5ですね。 |
| 02:08 | I think there's a faster way to do this. | もっと早くできる方法があると思います。 |
| 02:10 | If you know how, please post in the comments about it, because this is just how I do it. | これは私がやっている方法なので、ご存知の方はぜひコメントに書いてください。 |
| 02:15 | And I don't think it's the best way, but it gets the job done. | ベストな方法ではないと思いますが、これで仕事ができています。 |
| 02:17 | So I mainly updated each one. And now you see that the frames. | というわけで、それぞれを更新しました。これでフレームが見えてますね。 |
| 02:20 | If I start dragging this around, they have been updated to our right facing animation. | これをドラッグして動かすと、右向きのアニメーションに更新されています。 |
| 02:26 | One kind of cool thing is that the animations themselves have the same pattern where the head bobs. | クールなのは、アニメーション自体が、頭が揺れるのと同じパターンになっていることです。 |
| 02:31 | And so the hats that we've already duplicated from before the position track. | 帽子の位置は前につくったポジショントラックの複製を使いました。 |
| 02:35 | So we don't have to redo that it's already working. | だから、やり直す必要はありません。 |
| 02:37 | However, the hat see this little Bell front thing on the hat is facing forward still. | しかし、帽子についている小さな鈴のようなものは、まだ前を向いています。 |
| 02:43 | So when this animation starts, we want to grab this first frame placement of the hat and make sure that that's on one; | そこで、このアニメーションが始まったら、帽子の最初のフレームの配置を取得して、それが1になっていることを確認したいと思います。 |
| 02:50 | because the right facing hat and our hat Sprite Sheet is on frame one. | なぜなら、右向きの帽子と帽子のスプライトシートはフレーム1にあるからです。 |
| 02:55 | Now I'll play the animation and see that everything is set up correctly just like before. | それではアニメーションを再生して、先ほどと同じようにすべてが正しく設定されていることを確認しましょう。 |
| 02:59 | It was very minimal work to get to our right facing character. | 右向きのキャラクターにたどり着くまでの作業は非常に少ないものでした。 |
| 03:03 | Now that we have 2 separate animations, we can actually put them into our game and show how we can switch between them using code. | さて、2つのアニメーションができたので、実際にゲームに入れて、コードを使って切り替える方法を紹介しましょう。 |
| 03:09 | So we don't have any code for our character yet in this video. | 今回の動画では、まだキャラクターのコードはありません。 |
| 03:12 | So I'm going to go ahead and Select Kinematic Body 2D. | そこで、「Kinematic Body 2D」を選択して、 |
| 03:15 | I'm actually going to rename them character. I should have done it before. | キャラクターの名前を変えてみましょう。前にやっておくべきでしたね。 |
| 03:18 | So now that he's named character. | 「Character」という名前をつけてあげます。 |
| 03:21 | I'll create a new script by pressing this button, a new script button. | スクリプトのアイコン表示のボタンを押して、新しいスクリプトを作成します。 |
| 03:25 | And now it'll suggest character just a little bit of a nicer name than Kinematic Body 2D, and we have a new blank file. | ここで「Character」が提案されます。Kinematic Body 2Dよりもちょっといい名前ですね。新しい空のファイルができました。 |
| 03:32 | I'm going to get rid of almost everything. | コメントのほとんどすべてを取り除いてしまいましょう。 |
| 03:39 | And now to grab our AnimationPlayer and actually fire animations off with code, you just select the node, a Godot way to do that; | さて、AnimationPlayerを使い、実際にコードでアニメーションを実行するには、ノードを選択するだけです。これがGodotの方法です。 |
| 03:46 | You can say dollar sign and then the name of your node. | Godotのやり方ですが、ドルマークの後にノードの名前を入れます。 |
| 03:49 | So $AnimationPlayer.play pretty simple API. | つまり、$AnimationPlayer.playはとてもシンプルなAPIです。 |
| 03:55 | And then in here you pass in the name of your string and see it even is smart enough to kind of autocomplete; | そして、ここで文字列の名前を渡すと、オートコンプリートのようなスマートな機能もあります。 |
| 04:00 | that Godot knows the animations we have defined in our AnimationPlayer, and so it's suggesting them to us. | これはGodotがAnimationPlayerで定義したアニメーションを知っていて、それを提案してくれているということです。 |
| 04:05 | So when this node fires its ready event when it enters the scene for the first time, like we've talked about before; | さて、このノードが初めてシーンに登場してreadyイベントが発生すると、前に話したように、 |
| 04:11 | we just want to play this walkdown animation. | このウォーク・ダウンのアニメーションを再生したいと思います。 |
| 04:15 | Let's go ahead and actually use this in our game now because we actually haven't fired it up in the game yet. | まだゲームの中では起動していないので、実際に使ってみましょう。 |
| 04:19 | So what we'll do is go over to our World Map scene that we set up in a previous video. | 前の動画で設定したワールドマップのシーンに行きましょう。 |
| 04:23 | But if you haven't done that, it's okay, it's just basically a graphic with some stuff in it, but that doesn't matter. | まだ設定していない場合は、ただのグラフィックに何かが描かれているだけなので、問題ありません。 |
| 04:29 | So we'll right click on a Y sort that we have ready to go here. | では、準備してあったYソート(別動画で作成したノード)を右クリックします。 |
| 04:32 | Add instance child scene, and we'll pull up our character scene that we created and just drag them somewhere in here. | 「子シーンのインスタンス化」を実行して、作成した「キャラクター」シーンを取り上げ、ここにドラッグします。 |
| 04:40 | And then when we fire up the game with command B or F five on Windows; | コマンド＋B、またはWindowsであればF5でゲームを起動します。 |
| 04:44 | you see that the game fires in our hero because the ready function calls it is already playing our down animation. | 主人公の中ですでにゲームが起動しているのがわかります。ready関数が呼び出されたときには、Walk_Downのアニメーションが開始されているからです。 |
| 04:52 | Hopping back over to our script now. | さて、スクリプトに戻ります。 |
| 04:54 | Let's actually make them more interactive. | 実際にもっとインタラクティブにしてみましょう。 |
| 04:57 | So we'll go ahead and add in our physics process. | そこで、_physics_process()を追加してみます。 |
| 05:00 | Thank you, Godot for auto completing. | オート・コンプリートは助かります。ありがとう、Godot。 |
| 05:02 | And then we'll say if input is action just press, I'm going to do is add like if you press the right key, it's going to change to the right animation. | "if Input.is_action_just_pressed()"で、右キーを押すとWalk_Rightのアニメーションに変わるという機能を追加しましょう。 |
| 05:11 | If you press the down key, it'll change to the down one. | 下キーを押せば、Walk_Downのアニメーションに変わります。 |
| 05:13 | Pretty basic stuff. And then we'll go on from there. | かなり基本的なことですね。そして、そこから続けていきます。 |
| 05:15 | So if you press, let's do down first so, press the down key. | まずは下ダウンキーを押してみましょう。 |
| 05:21 | We'll do what we did before, which is Animation Play, walk-down and then kind of copy this logic. | 先ほどと同じように、AnimationPlayerの"Walk_Down"のロジックをコピーしていきます。 |
| 05:28 | I will throw in like else here. | elifを書き、 |
| 05:30 | So if this one's not true, it'll check this one UI, right. | つまり、こちらが真でない場合は、こちらのUIをチェックするというわけですね。 |
| 05:36 | And then the opposite case will Walk Right. | そして、その反対の時は「Walk Right」です。 |
| 05:40 | So now when I boot up the game, when I press the down key, it will switch to the down one. | これで、ゲームを起動して、下キーを押すと、Walk_Downに切り替わります。 |
| 05:45 | When I press right, the character will start facing right. | 右を押すと、キャラクターは右を向きます。 |
| 05:48 | And I can just keep toggling back and forth. | あとはひたすら切り替えていくだけです。 |
| 05:49 | You see that everything on the screen reflects the same stuff we saw in our AnimationPlayer preview. | 画面上のすべてのものが、AnimationPlayerのプレビューで見たものと同じのを反映しているのがわかります。 |
| 05:54 | Now let's cover the case where maybe you want to do something that's not cycling all the time like the walking animation where he's always walking. | では、いつも歩いているウォーキング・アニメーションのように常に循環しているのとは違う場合を考えてみましょう。 |
| 06:01 | Let's add an animation where the character takes off the hat or puts it back on. | キャラクターが帽子を脱いだり被ったりするアニメーションを追加してみます。 |
| 06:06 | And this will show us some kind of new concepts that you can do with the AnimationPlayer. | これで、AnimationPlayerでできる新しいコンセプトが見えてきます。 |
| 06:10 | So I will navigate back to our character and select our AnimationPlayer, make sure everything is selected here. | キャラクターに戻り、AnimationPlayerを選択し、すべてが選択されていることを確認します。 |
| 06:16 | And this time I'm going to duplicate it again, making sure I'm on the down animation. | そして今度は、Walk_Downアニメーションを選択した状態で、もう一度複製します。 |
| 06:22 | I'll say animation duplicate. | 「アニメーション」「複製」をクリック。 |
| 06:24 | And just like before we'll rename this one, the new one to be... | 先ほどと同じように、名前を変えます。 |
| 06:30 | Let's see, we want to call this Toggle Hat. | これを「Toggle Hat」と呼ぶことにしましょう。 |
| 06:36 | Our character Sprite Sheet had 2 extra little frames at the bottom for this kind of thing. | キャラクターのスプライト・シートには、この種のもののために、下部に2つの余分な小さなフレームがありました。 |
| 06:40 | So what we can do is reuse this first one. | その２つのうち最初のフレームを再利用できます。 |
| 06:42 | But I looked it up already, and I know that the frame I want here is number 16. | ここで必要なフレームは16番だということがわかっています。 |
| 06:47 | And then this one after this will change to 17. | そして、この後の1枚は17番に変わります。 |
| 06:51 | And then right after we do 17, we'll go back to 16. | そして、17番にした直後に16番に戻ります。 |
| 06:54 | So it's kind of like the character kind of bowing down a little bit and then coming back up. | つまり、キャラクターが少しだけお辞儀をして、また伸び上がるような感じですね。 |
| 06:58 | And then I'm going to remove our cyclical button here. | そして、ここでループ・ボタンをオフにします。 |
| 07:02 | What is that called animation looping button. | これはアニメーション・ループ・ボタンと呼ばれるものです。 |
| 07:04 | Now, when you see the character does the kneeling kind of thing. | さて、キャラクターがひざまづいているところを見てみましょう。 |
| 07:10 | But the hat isn't updated because the hat still wants to go back up to position zero on the third frame. | しかし、帽子は更新されていません。なぜなら、帽子は3フレーム目では0の位置に戻ろうとするからです。 |
| 07:16 | So we'll come into our third spot in our hat. | そこで、帽子の3番目の位置を調整します。 |
| 07:18 | And instead of going back to zero, we're actually going to go one more spot down to one or 2. Sorry. | そして、0に戻るのではなく、実際にはもう1つ下の2の位置に下がることになります。 |
| 07:23 | And so now we have zero, one, 2 back to one. | 0・1・2戻って1という設定にします。 |
| 07:27 | And now it matches up with the character appropriately. | これで、キャラクターと適切にマッチするようになりました。 |
| 07:31 | So the purpose of this animation, as the name suggests, is to toggle the hat of the character. | このアニメーションの目的は、名前が示すように、キャラクターの帽子を切り替えることです。 |
| 07:36 | So if the character is wearing the hat, they'll take it off. | つまり、キャラクターが帽子をかぶっていれば、それを脱ぎます。 |
| 07:39 | If the character is not wearing the hat, they'll put it on. | キャラクターが帽子をかぶっていなければ、帽子をかぶります。 |
| 07:41 | And so that kind of requires some logic. | そのためには、いくつかのロジックが必要です。 |
| 07:43 | But luckily, with the Godot AnimationPlayer, we can fire code. | しかし幸運なことに、Godot AnimationPlayerでは、コードを起動することができます。 |
| 07:46 | and that code can be scheduled to fire right at a certain time on any of these spots on the timeline. | そしてそのコードは、タイムライン上の任意の場所で特定の時間に起動されるようにスケジュールできるのです。 |
| 07:52 | What we'll do first is create the code we need to fire. | まず最初にやることは、起動するコードの作成です。 |
| 07:55 | So I'll go over to our script. | まず、スクリプトに移動しましょう。 |
| 07:57 | We're going to add a new function. | 新しい関数を追加します |
| 07:59 | This function is going to be called toggle hat visible; | この関数は「_toggle_hat_visible()」という名前にします。 |
| 08:10 | and we're just going to have some really basic logic that's just like we're going to grab the hat like we did before. | そして、先ほどのように帽子を取得するだけの基本的なロジックを作ります。 |
| 08:13 | So hat and then it's visibility or visible is going to be equal to the opposite of its current visibility. | Hat.visibleに、現在の状態の反転した値を代入します。 |
| 08:26 | Now we can use Godot AnimationPlayer to fire this method whenever we want, preferably somewhere appropriate in the animation cycle. | これで、Godot AnimationPlayerを使って、好きな時に、なるべくならアニメーションサイクルの適切な場所で、このメソッドを起動できるようになります。 |
| 08:34 | Down here, our AnimationPlayer is still open, so I can add a new track. | ここで、AnimationPlayerがまだ開いているので、新しいトラックを追加しましょう。 |
| 08:37 | This time I'm going to choose call method track, which allows us to choose a function or a method of code to run. | 今回は「メソッド呼び出しトラック」を選択します。このトラックで関数や実行するメソッドのコードを設定できます。 |
| 08:42 | This code lives in our character script. | このコードはキャラクターのスクリプトに含まれます。 |
| 08:45 | So I have character highlighted and say, okay, and now that gives us a new function track. | キャラクターをハイライトして、「OK」とすると、新しい関数トラックができます。 |
| 08:50 | And when I create a stop here, I get this new pop up and the pop up you can see already knows the code and the methods available in our character. | ここで「ストップ」を作ると、新しいポップアップが表示されます。このポップアップには、キャラクターで利用できるコードやメソッドが表示されます。 |
| 08:59 | And so the one that we created toggle Hatvisible is right here. | 作成した_toggle_hat_visibleメソッドはここにあります。 |
| 09:02 | Ready to go. You could also redo ready if you wanted. | これで準備完了です。望むなら、readyをやり直すこともできます。 |
| 09:04 | I don't know why you do that, but you could. | なぜそんなことをするのかはわかりませんが、そうすることもできます。 |
| 09:06 | So we'll choose toggle hatvisible, say open and then right at this spot. | _toggle_hat_visibleを選択し、開いたり右に動かしたりしてみます。 |
| 09:11 | When this happens in the game, visible, toggle hat visible method will fire right when the animation hits this spot. | これがゲーム内で起こると、アニメーションがこの場所に到達したときに、_toggle_hat_visibleメソッドが実行されます。 |
| 09:19 | making it visible. Let's go back to our 2D editor so we can see. | 帽子が見えるか2Dエディタに戻って確認してみましょう。 |
| 09:22 | I think where we want it is right here. | 帽子が欲しい場所はここだと思います。 |
| 09:26 | This isn't going to be a perfect animation, but you get the idea and to actually fire it in context of the game; | これは完璧なアニメーションではありませんが、イメージはつかめると思います。実際にゲームの文脈の中でそれを実行するには、 |
| 09:30 | we need to add it to our character script as well. | キャラクター・スクリプトにも追加する必要があります。 |
| 09:33 | So I'll go back to character. | そこで、キャラクターに戻ります。 |
| 09:34 | We'll add one more of these cases. | このようなケースをもう一つ追加します。 |
| 09:39 | We'll say UI accept, which is like our space or enter button. | "ui_accept"、これはスペースやエンターキーのことです。 |
| 09:44 | We're going to say toggle hat. | 「Toggle_Hat」という名前にします。 |
| 09:48 | The space out. | １行あけます。 |
| 09:50 | Now, when I run the game, our right and down still work. | さて、ゲームを実行すると、右向きと下向きは機能しています。 |
| 09:54 | But I press the space bar and the character takes the hat off, and then if I press it again, he'll run the same animation. | そして、スペースバーを押すと、キャラクターは帽子を脱ぎます。もう一度スペースバーを押すと、同じアニメーションを実行しますが、 |
| 10:01 | But this time put the hat on during that same frame. | 今度は同じフレーム内で帽子を被ります。 |
| 10:04 | The other kind of cool thing is that now our hat being visible is kind of like a little piece of state; | もうひとつのクールな点は、帽子が見えるということは、小さな状態の一部のようなものだということです。 |
| 10:08 | so I can walk to the right with the hat on, walk down with it on, take the hat off and then right. | つまり、帽子をかぶって右に歩き、帽子をかぶって下に歩き、帽子を脱いで右に歩く。 |
| 10:14 | Be walking without it and then down again. | そして脱いで下に歩きます。 |
| 10:17 | And he's not wearing the hat. | 主人公は帽子をかぶっていない。 |
| 10:18 | So like we talked about before, if you have a game where you can unlock pieces of clothing for the character. | 前に話したように、キャラクターの服の一部をアンロックできるゲームがあれば、それを利用することができます。 |
| 10:23 | Maybe like pieces of armor and Mega Man X or something like that; | アーマーの装具とかロックマンXなどがそうですね。 |
| 10:26 | you can just toggle those pieces on and off or swap them out with whatever you need without needing to redo the animations every time. | このようにして、アニメーションを毎回作り直すことなく、必要に応じて服の着脱や交換を行うことができるのです。 |
| 10:34 | Okay, that wraps up the end of our little video series about the Godot AnimationPlayer. | さて、Godot AnimationPlayerの動画シリーズはこれで終わり。 |
| 10:38 | We've covered a lot of good stuff as far as creating animations, automating and animating different types of tracks, and then firing those animations with code. | アニメーションの作成、様々なタイプのトラックの自動化とアニメーション化、そしてコードによるアニメーションの実行など、たくさんの良いところを紹介しました。 |
| 10:47 | There's a lot more you can do there too. | それ以外にもできることはたくさんあります。 |
| 10:49 | There's some other different, more functional, less manual ways to choose which animation should be playing right now; | もっと機能的で、手動ではない方法で、再生すべきアニメーションを選ぶことができます。 |
| 10:55 | and we'll definitely maybe cover those in future videos. | 今後の動画で紹介していきたいと思います。 |
| 10:57 | Let me know in the comments below if you're interested in that kind of thing; | もし興味があれば、下のコメント欄で教えてください。 |
| 11:00 | but personally I just loved using the AnimationPlayer, the game I'm working on right now. | しかし、個人的には今取り組んでいるゲームでAnimationPlayerを使うのが好きでした。 |
| 11:05 | Each character in the game has a ton of animations; | このゲームでは、各キャラクターに大量のアニメーションが用意されているので、 |
| 11:07 | and so it's really important that I stay organized and that those animations are easy to come back to later to edit and modify things. | 整理整頓して、後からでも簡単にアニメーションを編集・修正できるようにしておくことが重要なのです。 |
| 11:14 | Otherwise, things just get absolutely out of control. | そうしないと、手に負えなくなってしまうからです。 |
| 11:16 | So the Godot AnimationPlayer has made that really easy for me, and it's really awesome. | Godot AnimationPlayerはそれを簡単に実現してくれて、本当に素晴らしいです。 |
| 11:20 | Thank you so much for watching. | ご覧いただき、ありがとうございました。 |
| 11:21 | If you're interested this kind of thing, please hit the subscribe subscribe button. | この種のものに興味のある方は、ぜひサブスクライブ・ボタンを押してください。 |
| 11:24 | If you want to tell us about the game that you're making, hit up our discord channel links in the description below, and I'll catch you all next time. | もしあなたが作っているゲームについて話したいなら、下の説明にあるDiscordチャンネルのリンクをクリックしてください、では次回お会いしましょう。 |
