Godot4 マウスクリック・ドラッグ中の位置をスプライト画像で表示2/2

2D / 3D ゲームを作成できる無料・オープンソースの軽快なゲームエンジン「Godot Engine 4」で、マウスクリック時やドラッグ中の位置をスプライト画像で表示する手順を紹介します。

パート２（全２話）では、クリック・ドラッグイベントを検知して、前回作成した黄色い円のスプライト画像をその位置に表示したり、非表示に切り替えるスクリプトやシーンの設定を行います。

※ GodotEngine のバージョンは 4.2.1 です。 .NET 版ではありません。
※記事で紹介するスクリプト / プログラム / コードは自己責任で使用してください。

前回の記事
TouchMarker の初期状態を非表示にする
1. スクリプトから表示は切り替えられる
touch_markerシーンをgame_managerシーンの子ノードとして追加
テスト
まとめ
参照サイト Thank You!

前回の記事

前回は、プロジェクトとシーンを作成して、半透明の画像ファイルをプロジェクトに追加して、それをゲーム画面に表示しました。

TouchMarker の初期状態を非表示にする

TouchMarker はクリック・ドラッグ中にだけ円の画像を表示します。
それ以外は非表示が良いので、初期設定を非表示に変更します。

touch_marker シーンを選択して、シーンドックのルートノード TouchMarker の右側の目のアイコンをクリックして閉じた状態にします。
これにより TouchMarker が継承している CanvasItem クラスの Visible を false に設定できます。

スクリプトから表示は切り替えられる

後述するスクリプトでは、_ready イベント関数で TouchMarker ノードの表示 / 非表示のプロパティ visible を false (非表示) に変えているので、必ずしも touch_marker シーンで非表示にする必要はありません。

ノードの個数が多く、毎回最初は非表示な状態ならば、処理のコストを下げるためにあらかじめシーンで非表示にしたほうが良いかもしれません。

# Called when the node enters the scene tree for the first time.
func _ready():
	# 子ノードの TouchMarker を変数に設定します。
	touchMarker = $TouchMarker
	# TouchMarker はクリックされるまでは非表示にしておきます。
	touchMarker.visible = false
	return

touch_markerシーンをgame_managerシーンの子ノードとして追加

マウスのイベントに応じて TouchMarker を表示する game_manager シーンを作成します。
メニュー「シーン」→「新規シーン」を選択した後、シーンドックで「その他のノード」を選択して Node クラスを選び「作成」ボタンを押します。
※ Node クラスは最も基礎的なクラスです。特に絵を表示するなどの機能を必要としないので選びました。

ルートノードを GameManager にリネームしてから、シーンドックの右上の＋ボタンを押してスクリプトを割り当てます。

game_manager という名前でシーンを保存しましょう。

画面上部のビューが Script に切り替わるので、割り当てた GameManager.gd に以下のスクリプトを貼り付けます。
詳細はスクリプトのコメントを参照してください。

extends Node

# 波紋を描画するシーンを子ノードとして生成する際に用います。
var sceneRipple
# 子ノードの TouchMarker の参照
var touchMarker

# Called when the node enters the scene tree for the first time.
func _ready():
	# 子ノードの TouchMarker を変数に設定します。
	touchMarker = $TouchMarker
	# TouchMarker はクリックされるまでは非表示にしておきます。
	touchMarker.visible = false
	return


# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
	pass

# ドラッグ中またはスワイプ中ならば true です。 _input イベントで扱います。
var dragging = false

# 入力イベントが発生するたびに呼び出されるイベント関数です。
func _input(event):
	# 入力の例 — Godot Engine (4.x)の日本語のドキュメント - https://docs.godotengine.org/ja/4.x/tutorials/inputs/input_examples.html#mouse-motion
	if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_LEFT:
		# Start dragging if the click is on the sprite.
		if not dragging and event.pressed:
			dragging = true
			# 左ボタンを押した瞬間の処理
			# タッチマーカーを表示状態に変更します。クリックした座標に位置を変更します。
			touchMarker.position = event.position
			touchMarker.visible = true
		# Stop dragging if the button is released.
		if dragging and not event.pressed:
			dragging = false
			# ボタンを離した瞬間の処理
			# タッチマーカーを非表示に変更します。
			touchMarker.visible = false
	# While dragging, move the sprite with the mouse.
	if event is InputEventMouseMotion and dragging:
		# ドラッグ中の処理
		# タッチマーカーの位置をドラッグしている位置に更新します。
		touchMarker.position = event.position
	return

game_manager シーンを開いた状態で、ファイルシステムドックの touch_marker シーンをシーンドックにドラッグ＆ドロップして、 GameManager ノードの子ノードとして追加します。

Godot4 game_manager シーンに touch_marker シーンを子ノードとして追加します.

これでスクリプト GameManager.gd の 10 ～ 11 行目の $TouchMarker の実体を game_manager シーンに配置できました。
スクリプトでは、シーンに配置された TouchMarker に $TouchMarker でアクセスして、位置の変更と表示 / 非表示を切り替えます。

テスト

F6 キーでシーンを再生してみると、最初は何も表示されず、クリック時、ドラッグ時にのみスプライト画像の黄色い円がその場所に表示されました。

まとめ

パート２では、2D / 3D ゲームを作成できる無料・オープンソースの軽快なゲームエンジン「Godot Engine 4」で、クリック・ドラッグイベントを検知して、前回作成した黄色い円のスプライト画像をその位置に表示したり、非表示に切り替えるスクリプトやシーンの設定を行いました。