2．Playerシーンの作成
シーンの作成
それでは最初のシーンを作ります。プレイヤーが操作するキャラクターである「Player」シーンです。
これまで何度か説明してきましたが、Godot Engineのシーンは、ツリー構造を持ったノードの集合です。映画や演劇のシーンとは違い、画面を表しているわけではありません。
「シーン」ドックの「ルートノードを生成」から「その他のノード」ボタンをクリックします。
そして「Node2D」＞「CollisionObject2D」＞「Area2D」とたどり、「作成」ボタンで「Area2D」を作成します。
「Area2D」は、オブジェクトの重なりを検出するためのノードです。今回のゲームでは敵との当たり判定に用います。
このノードの作成部分ですが、公式ドキュメントには「Area2Dを作成する」とだけ書いてあります。Node2Dからたどる以外にも「検索」に入力して絞り込むことでも、Area2Dを作成できます。
作成したあとは「Ctrl+S」でプロジェクトを保存します。「名前を付けてシーンを保存」ダイアログが開きますので、そのまま「保存」ボタンを押します。
Area2Dを作成すると、「シーン」の「Area2D」の横に警告アイコンが表示されます。この警告は、衝突や重なりを検出するためにノードにシェイプが必要であることを示しています。この警告はいったん無視して先に進みます。
シーン名の変更
さて、シーンのルートとして「Area2D」を作成しましたが、この名前のままだと、今後他のシーンを作るときに混乱します。ルートの名前を「Player」に変更しましょう。
「シーン」ドックの「Area2D」をダブルクリックして「Player」に名前を変えます。また、「ファイルシステム」の「area_2d.tscn」ファイルの名前も、右クリックして「名前を変更」を選び、「player.tscn」に変更します。
プロジェクトを変更したので「Ctrl+S」で保存します。
選択したノードをグループ化
この「Pleyer」（Area2D）ノードには、これから他のノードを追加していきます。その際に、誤クリックなどで他のノードの位置などが動いてしまうと面倒です。そこで、そうしたエラーを防ぐための設定をおこないます。
2Dビューの上に並んでいるアイコンの中から、鍵アイコンの右にある「選択したノードをグループ化」アイコン
をクリックします。そして「Ctrl+S」でプロジェクトを保存します。
こうすることで、誤クリックで移動したりサイズを変更したりすることができなくなります。
それでは次に、「Player」にスプライトアニメーションを登録していきましょう。
AnimatedSprite2Dの登録
Godot Engineには、用意されている数多くのノードがあります。その中には、画像を切り替えてアニメーションさせる「AnimatedSprite2D」というノードもあります。
この「AnimatedSprite2D」を使い、プレイヤーがコントロールするキャラクターの表示をおこないます。
「シーン」ドックのルートノードである「Player」を右クリックして、「子ノードを追加」を選びます。
「Nodeを新規作成」ダイアログが開きますので、「検索」に「AnimatedSprite2D」と入れて検索をおこない、「AnimatedSprite2D」を選択して「作成」ボタンを押します。
「シーン」の「Player」の配下に、「AnimatedSprite2D」が追加されました。
ここでも警告アイコンが出ます。「AnimatedSprite2D」の警告アイコンは、アニメーションするリソースである「SpriteFrames」がないために出ています。次の作業は、この「SpriteFrames」を追加する作業になります。
SpriteFramesの追加
「インスペクター」ドックの「AnimatedSprite2D」の中にある「Animation」を開きます。クリックで配下の設定が展開されます。
「Animation」配下に「Sprite Frames」という項目がありますので、デフォルト値の「<空>」をクリックして「新規 SpriteFrames」を選択します。
項目「Sprite Frames」の値が「SpriteFrames」（新規作成したもの）になりますのでクリックします。
インスペクターに「Resouce」の項目が追加されて、メインビューの下部に「アニメーション」と「アニメーションフレーム」が開きます。
アニメーションの登録
画面下部のパネルですが、「アニメーション」が大項目で、「アニメーションフレーム」が小項目です。
「アニメーション」には、初期状態で「default」というアニメーションが1つだけ入っています。
この「default」の名前を「walk」に変更します。名前は「default」をダブルクリックすると変更できます。「walk」を、歩行アニメーションとして使います。
「walk」を選択した状態で、「ファイルシステム」ドックの「art」フォルダー内にある「playerGrey_walk1.png」と「playerGrey_walk2.png」を順番に「アニメーションフレーム」にドロップします。
追加した画像は、ゲーム画面のサイズに対して大きめに作られています。そこで「インスペクター」ドックの「Node2D」の「Transform」を開いて「scale」＞「x」の値を「0.5」に、「y」の値を「0.5」にします。
「ストレッチモード」が「Canvas Items」なので、ウィンドウが大きな場合も、高解像度（2倍のサイズ）の画像を使って滑らかに描画されます。
「x」「y」の値は、デフォルトでは鎖マークのアイコン（縦横比を固定する）が付いておりロックされています。そのため「x」か「y」のいずれかの値を変更すると、もう一方も同じ値になります。
アニメーションの登録2
同様にアニメーションをもう1つ登録します。アニメーションの下に並んだアイコンから、ファイルにプラスが付いた「アニメーションを追加」をクリックします。「new_animation」というアニメーションが作成されるので、名前を「up」に変更します。「up」は、上下移動のアニメーションとして使います。
この「up」を選択した状態で、「ファイルシステム」の「art」フォルダー内にある「playerGrey_up1.png」と「playerGrey_up2.png」を、順番に「アニメーションフレーム」にドロップします。
ここでは「scale」の値は変更しなくても大丈夫です。「インスペクター」の「Node2D」の「Transform」の設定は、ノード全体の設定です。アニメーション個別の設定ではないので、全ての配下のアニメーションに「scale」の値は適用されます。
CollisionShape2Dの登録
「SpriteFrames」を設定したため、「AnimatedSprite2D」の警告は消えました。しかしまだ「Player」（Area2D）の警告は消えていません。
次は「CollisionShape2D」を追加します。「CollisionShape2D」はヒットボックス（衝突判定の領域）を設定するためのノードです。
「シーン」の「Player」を右クリックして「子ノードを追加」を選択します。
「Nodeを新規作成」ダイアログが出ますので、検索に「CollisionShape2D」と入力して「CollisionShape2D」を選択して、「作成」ボタンを押します。
「Player」の配下に「CollisionShape2D」が作成されて、「Player」の警告は消えました。その代わりに、新しく追加した「CollisionShape2D」に警告が出ています。これはシェイプが未設定のために出ているものです。
シェイプの設定
それでは「CollisionShape2D」にシェイプを設定しましょう。「インスペクター」ドックの「CollisionShape2D」の「Shape」が「<空>」になっているのでクリックします。そして「新規 CapsuleShape2D」を選択します。
青色の領域が現れて、赤色のハンドルが表示されます。この時点で「CollisionShape2D」の警告は消えます。
見やすいように、2Dビューの左上にあるUIの、左端にあるボタン（中心ビュー）をクリックします。
そして「＋」ボタンを何回か押して表示を拡大します。この状態で「シーン」ドックの「CollisionShape2D」を選択します。
赤色のハンドルを操作して、青色の領域が次のような状態になるようにします。そして「Ctrl+S」で保存します。
「Player」へのノードの追加は以上です。それでは先に進みましょう。
