2Dトップダウン脱出ゲームチュートリアル Part 4: インベントリーシステムの実装


Godot Engine バージョン4.3

このチュートリアルでは、Godot 4.3を使用して2Dトップダウン脱出ゲームにインベントリーシステムを追加します。本パートでは、アイテムの取得、選択、表示、管理を行うUIの作成方法を学びます。




こちらから試しにプレイしてください!

プロジェクトのダウンロードはこちらから!



1. オブジェクトのインタラクションの続き

インベントリ内のアイテムを表すリソースクラスを作成します。
リソースクラスがあると扱いがすごく楽になるのでおすすめです。
スクリプトをitem.gdとして作成します。
# インベントリ内のアイテムを表すリソースクラス
class_name InventoryItem
extends Resource

## アイテムの一意な識別子(ID)
@export var item_id: int
## アイテムの名称
@export var item_name: String
## アイテムのアイコン画像(圧縮テクスチャ)
@export var item_icon: CompressedTexture2D
## アイテムの説明文(複数行対応)
@export_multiline var item_description: String
これでInventoryItemを使ってInspectorでアイテムを簡単に作成して、インベントリー内でも扱いやすくします。

次に前回のオブジェクトのインタラクションの続きになります。
拾うオブジェクト(typeがPICKABLEの場合)
このオブジェクトは、プレイヤーがインタラクションするとオブジェクトを拾うことができるオブジェクトになります。
例えば物が落ちていて、インタラクションするとオブジェクトを拾ってインベントリーに追加して、インタラクションしたオブジェクトを削除することでアイテムを拾ったように見せれます。また隠れたアイテムを拾うシーンも作成可能です。花瓶の下に鍵がある設定で、花瓶にインタラクションするとダイアログで「ん?花瓶の下に何かある・・鍵だ!」のように花瓶は消さずに鍵だけをインベントリーに追加するようなことも可能です。





ロックされているオブジェクト(typeがLOCKEDの場合)
このオブジェクトは、プレイヤーがインタラクションするとロックされているオブジェクト用の会話ダイアログを出したり、ロックを解除するアイテムを持っている場合は解除して会話ダイアログを表示してロックされているオブジェクトからアイテムを獲得してインベントリーに追加することができます。
例えば宝箱があります。その宝箱はロックされていて開けるためには鍵が必要です。鍵をインベントリーに無い場合は「鍵がかかっている」のようなダイアログを出します。もし鍵を持っている場合は、「宝箱が開いた!」のようにダイアログを出して、宝箱から新しいアイテムを取得するようなシーンを作成が可能です。










2. インベントリーのUI構造

インベントリーのUIは以下のようなノード構造になります。
Inventory (Panel)
├── ItemImage (TextureRect)
├── InventoryLabel (Label)
├── ItemList (VBoxContainer)
├── ItemName (Label)
├── ItemDescription (Label)
└── CloseBtn (Button)
各ノードの役割は次のとおりです。
  • ItemImage: 選択したアイテムの画像を表示
  • InventoryLabel: インベントリーのタイトル
  • ItemList: アイテム一覧を表示するコンテナ
  • ItemName: 選択したアイテムの名前を表示
  • ItemDescription: 選択したアイテムの説明を表示
  • CloseBtn: インベントリーを閉じるボタン





3. インベントリーのスクリプト

inventory.gd
次のスクリプトをInventoryノードにアタッチしてください。
extends Panel

# インベントリのUIを管理するクラス

## アイテムのボタンブロックとして使用するシーン(インスタンス化される)
@export var item_block: PackedScene

@export_category("Item List")
## インベントリ内に初期登録されるアイテムリスト
@export var item_list: Array[InventoryItem]

# UI要素への参照(onreadyで取得)
@onready var item_list_ui = $ItemList # アイテム一覧を表示するコンテナ
@onready var item_image = $ItemImage # 選択したアイテムの画像表示
@onready var item_name = $ItemName # 選択したアイテムの名前表示
@onready var item_description = $ItemDescription # 選択したアイテムの説明表示

# インベントリ内のアイテムデータを管理するリスト
var intentory: Array[InventoryItem] = []

# 現在選択されているアイテムのインデックス(未選択時は -1)
var selected_item = -1

func _ready():
# 初期状態ではアイテムの名前と説明を空にする
item_name.text = ""
item_description.text = ""

# アイテムをインベントリに追加する処理
func add_item(item):
var new_item = item_block.instantiate() # アイテムボタンのインスタンスを作成
new_item.get_child(0).texture_normal = item.item_icon # アイテムのアイコンを設定
new_item.get_child(0).pressed.connect(_button_pressed.bind(intentory.size())) # ボタンが押されたときの処理を接続
intentory.append(item) # インベントリにアイテムを追加
item_list_ui.add_child(new_item) # UIに追加

# 指定したIDのアイテムを所持しているか判定する
func has_item(item_id):
var found = false
for item in intentory:
if item.item_id == item_id:
found = true
break
return found

# アイテムボタンが押されたときの処理
func _button_pressed(pos):
if selected_item == pos:
# すでに選択されているアイテムをクリックした場合、選択解除
selected_item = -1
item_image.texture = null
item_name.text = ""
item_description.text = ""
else:
# 新たにアイテムを選択
selected_item = pos
item_image.texture = intentory[pos].item_icon
item_name.text = intentory[pos].item_name
item_description.text = intentory[pos].item_description

# インベントリを閉じる
func close_inventory():
hide()
# インベントリを開く
func open_inventory():
show()



4. スクリプトの解説

  • add_item(item): 新しいアイテムをインベントリーに追加し、ボタンを作成してリストに追加します。
  • has_item(item_id): 指定されたIDのアイテムを所持しているか確認します。
  • _button_pressed(pos): アイテムが選択された際に、対応する情報をUIに表示します。
  • close_inventory(): インベントリーを閉じます。
  • open_inventory(): インベントリーを開きます。



5. インベントリーの動作テスト

  • Inventoryシーンをゲーム画面に追加する。
  • ItemBlockのシーンを作成し、ボタンを設置する。
  • add_item()関数を使ってアイテムを追加し、インベントリーに表示されるか確認する。
  • ボタンを押してアイテム情報が正しく表示されるか確認する。
  • close_inventory()open_inventory()を実行し、インベントリーが開閉できるか確認する。



6. まとめ

このチュートリアルでは、インベントリーシステムの基本的な構造とスクリプトの実装方法を学びました。 これで2Dトップダウン脱出ゲームチュートリアルが完了になります! あとはステージや謎解きやストーリーをお好みで作成してオリジナルの脱出ゲーム作成してください!
何かわからないことがありましたらコメントをいただけると幸いです。

お疲れ様でした!
最終更新日: 2025/02/13 04:20

コメント