0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[ GODOT 4 ] Sprite2Dノード

0
Posted at

Godot Engineで使用するノードに関するの備忘録です。

この記事はGeminiを活用して作成しました。

1. はじめに

Sprite2D は、2Dゲームで画像(テクスチャ)を表示するための最も基本的なノードです。

アニメーションさせない単一の画像を表示するのに特化しており、背景、プレイヤーキャラクター、アイテムの見た目などを表現するのに使われます。Playerノードや敵、アイテムのルートノードの子として広く使われます。

主な用途

  • プレイヤー、敵、アイテム、NPCの画像表示
  • 静止した背景や前景
  • アイコンやUI要素
  • エフェクトの静止画像

⚠️ 注意: Sprite2D 単体では動作しません。表示する画像を定義するために、インスペクターの Texture プロパティに画像を割り当てる必要があります。

image.png


2. 代表的なプロパティ

インスペクターでよく設定する、Sprite2D の代表的なプロパティです。

プロパティ名 説明
Texture 表示する画像を選択(画像をドラッグ)。
Centered true の時、画像をノードの中心に配置します。デフォルトはON。
Offset 画像の中心からの表示オフセット量。
Hframes / Vframes 画像をスプライトシートとして分割する場合のフレーム数。

3. 代表的なシグナル

Sprite2D は、主に静止画像の表示のみを担当するため、よく利用するシグナルはありません。


4. 使い方(コインの表示例)

ここでは、Step 1〜4でアイテムとしての「コイン」を表示する手順を解説します。

📌 実装の全体フロー

  • Step 1: ノードの作成(コインを表示するノードを追加する)
  • Step 2: 画像の割り当て(コインのテクスチャを設定する)
  • Step 3: 中心設定の調整(表示位置を調整する)
  • Step 4: [コード例] 向きの変更(GDScriptで画像を反転させる)

🛠️ Step 1. ノード構成の作成

コインを配置される「シーン」を作ります。

  1. 新規シーンを作成し、ルートノードを Node2D (名前: Coin) とします
  2. Coin の子ノードとして、Sprite2D を追加します (名前: CoinSprite)
  3. これからこのノードに、インスペクターで画像を割り当てます

【シーン構成】

Coin (Node2D)
└── CoinSprite (Sprite2D)

🖼️ Step 2. 画像の割り当て

コインの画像ファイルを Sprite2D ノードに設定します。

  1. CoinSprite (Sprite2D) ノードを選択します
  2. インスペクターで Texture プロパティを見つけます
  3. ファイルドックからコインの画像ファイル (例: coin.png) を Texture プロパティにドラッグ&ドロップします。これで画面にコインが表示されます。

🎯 Step 3. 中心設定の調整

画像の中心をノードの原点に合わせるか調整します。

  1. インスペクターで Centered プロパティを確認します。
    これが On の時、コインの中心がノードの位置となります。アイテムなどでは通常このままで良いでしょう。
    逆に、画像の左上を起点にしたい場合は、Centered を Off にします。

💻 Step 4. コード例(画像の反転)

ゲーム中にGDScriptを使って、画像の向きをプログラムで反転させる例です。

CoinSprite にスクリプトをアタッチし、以下のように記述します。

extends Sprite2D

# 1/10秒ごとに画像を反転させる
func _process(delta):
    # 向きを反転させる (flip_h プロパティを使用)
    if Input.is_action_just_pressed("ui_accept"): # スペースキーを押したとき
        flip_h = !flip_h
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?