最終確認日
Godotでモバイル向けにジョイスティックを実装する
調査
まずは他の人は何を使って実装しているかを調査する。
Asset Library
- Virtual Joystick
- Godot 4.2に対応している
- 左右のジョイスティックがある
実装記事
- 仮想ジョイスティックを作成する
- Assets なし
- 4.3 で実装
- 関係ないけど「光るコード、君の手で」いい曲
仮想ジョイスティックを実装する
仮想ジョイスティックを作成するの通りにジョイスティックを実装してみる。
- Control ノードは次のように配置した（左上が原点で問題なし)
-
- 配置したら、Base と Handle は非表示にしておく。
-
- スクリプトは記事の通りそのままコピペ
VirtualJoystickシーンを実行してみる-
- 画面の左側をタップするとジョイスティックが出てくる。
他のシーンに配置して使ってみる。
とりあえずまずはこのまま使ってみる。
Player.tscnで矢印キーで動くスクリプトを書いている。get_movement_vectorで移動方向を渡している。- ここに組み込む。
@export var joystick: VirtualJoystick
# 移動方向のVector2を返す.
func get_movement_vector():
if DisplayServer.is_touchscreen_available():
# タッチスクリーン専用の処理
var vector2 = joystick.get_joystick()
return vector2
else :
# 両方を押している場合は0を返す
var x_movement = Input.get_action_strength("move_right") - Input.get_action_strength("move_left")
var y_movement = Input.get_action_strength("move_down") - Input.get_action_strength("move_up")
return Vector2(x_movement, y_movement)
これで次のような動きができた。
調整する
- 画面のどこを触ってもジョイスティックが出るようにしたい。
_input(event)関数のevent.position.x * get_viewport().get_screen_transform().x.xをevent.position.x < window_widthに変更
- ジョイスティックのサイズをもっと小さくする。
joystick_scaleを調整- 画面の高さに基づいている部分を変えてもいいかも
- ボタンなどをタップした時にも表示されてしまう
- ジョイスティックが無効になるように
MouseFilterをチェックしてから処理する event.pressedの中でチェックしないと、タップ終了時がうまく取れなくなるので注意
- ジョイスティックが無効になるように
func _input(event):
# 入力がタッチかどうかを確認
if event is InputEventScreenTouch:
# タッチ開始時の処理
if event.pressed:
# 自分自身ではないControl、かつイベントをブロックするControlなら無視
var hovered_control = get_viewport().gui_get_hovered_control()
if hovered_control != null:
if hovered_control != self and hovered_control.mouse_filter != Control.MOUSE_FILTER_IGNORE:
return
# ジョイスティックの処理...実機で動かしてみた。いい感じ。
おわりに
かわいい。
結構簡単に作れることがわかった。仮想ジョイスティックを作成するの記事に感謝。
公開日
更新日