Godot Engineでゲーム画面に画像を表示するにはSprite2D
ノードを使います。
このページでは、その手順を簡単に紹介します。
目次
ゲーム画面に画像を表示する手順
STEP1. 画像表示に必要な「Sprite2D」ノードを作成する
まずは、画像を表示するために必要なSprite2D
を作成します。
「シーン」から「その他のノード」を選んでください。
![](https://seeds-digital.com/wp-content/uploads/2024/05/b244a6a170e3de9d3aac36ad7855c371-1024x567.png)
Nodeの新規作成画面が表示されるので、「Sprite2D」を選んで作成します。
![](https://seeds-digital.com/wp-content/uploads/2024/05/4d4b0806f5506825531ff1ab807cc71b-1-1024x822.png)
作成すると下の画像のようにSprite2Dノードが追加されます。
![](https://seeds-digital.com/wp-content/uploads/2024/05/350a91d9c97c66be3fdeb7de2f9fc92b.png)
STEP2. 表示する画像を用意する
今回はいらすとやさんから鳥の画像をお借りしました。
ゲームに表示したい画像をGodotのファイルシステムの中に格納します。
画像はあなたのパソコンからドラッグ&ドロップで格納できます。
![](https://seeds-digital.com/wp-content/uploads/2024/05/ef2e85060ede59dfcb0af5a4e91aa6a8-618x1024.png)
格納後はこんな感じです。
![](https://seeds-digital.com/wp-content/uploads/2024/05/1b158737bb57ec761c5aadc5f7fc7347.png)
STEP3. Sprite2Dノードに画像をセットする
追加したSprite2D
ノードを選択して、画面右端のインスペクタ内にあるTextureの<空>をクリックします。
![](https://seeds-digital.com/wp-content/uploads/2024/05/6756bf98176fb1d2c8e8a1ac5382228f-1024x511.png)
色々出てきますが、その中の「読み込む」をクリックします。
![](https://seeds-digital.com/wp-content/uploads/2024/05/9a767a879174b453113056bf83999b02-450x1024.png)
先ほど追加した鳥の画像を選びます。
![](https://seeds-digital.com/wp-content/uploads/2024/05/9a0c66f4f65cd7b78c9bdc14c6730d7c-1024x716.png)
鳥の画像が追加されるので、ゲーム画面内に画像をドラッグ&ドロップで移動させます。
![](https://seeds-digital.com/wp-content/uploads/2024/05/41275128e62ca281815fe153497054ad-1024x640.png)
以上で、ゲームを動かしてみると・・・
![](https://seeds-digital.com/wp-content/uploads/2024/05/da5dbdf8d2401e2e5c56514cfc8cb434-1024x622.png)
ゲーム画面に画像が表示されました!
画像のサイズを変更するには?
インスペクタのTransform > Scaleからサイズを変更できます。
デフォルトは「1」で、xとyの値を「0.5」にすると半分の大きさになります。
![](https://seeds-digital.com/wp-content/uploads/2024/05/e09e3d798dc02757711e927dfe9d9c78.png)
試しにサイズを0.5に変更すると次のようになります。
![](https://seeds-digital.com/wp-content/uploads/2024/05/4702a4514ddae68c9e3dbba40f955b61-1024x626.png)
画像を回転するには?
インスペクタのTransform > Rotationから角度を変更できます。
![](https://seeds-digital.com/wp-content/uploads/2024/05/e09e3d798dc02757711e927dfe9d9c78-1.png)
試しに45°に変更すると次のようになります。
![](https://seeds-digital.com/wp-content/uploads/2024/05/202ee34bd1f520df0850081549312244-1024x626.png)
Comment