はじめに (対象読者・この記事でわかること)

本記事は、Swift で iOS アプリやゲーム開発を始めたばかりの初心者から、SpriteKit の基礎は理解しているが、ユーザー入力によるノード操作を実装したい中級者までを対象としています。
この記事を読むことで、SpriteKit のシーン内でタッチ操作（touchesMoved）を捕捉し、ノードを指に追従させてドラッグさせる実装方法 が具体的に分かります。さらに、タッチ座標の変換や物理エンジンとの併用、デバッグテクニックまで網羅的に学べます。開発の背景として、タッチインタラクションがゲームの操作感に直結するため、正しい実装が重要になる点を踏まえて執筆しました。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。
- Swift の基本的な文法と Xcode の使用方法
- SpriteKit のシーン（SKScene）とノード（SKNode）の概念
- iOS アプリのビルド・実行フロー

SpriteKit におけるタッチ操作の概要

SpriteKit では SKScene がタッチイベントを受け取り、touchesBegan(_:with:)、touchesMoved(_:with:)、touchesEnded(_:with:) といったメソッドでユーザーの指の動きを取得できます。
touchesMoved は指が画面上で移動した瞬間に呼び出され、UITouch オブジェクトから現在の位置（location(in:)）を取得できます。この位置情報をもとに、対象ノードの座標を更新すれば「ドラッグ」感覚のインタラクションが実現します。

しかし、単に位置をコピーするだけでは「ノードが指にくっつく」動作にならないケースがあります。代表的な課題は以下の通りです。

  1. 座標系の違い
    location(in:) はシーン座標系で返りますが、ノードが子ノードやスケール変形を持つ場合、ローカル座標系へ変換が必要です。

  2. タッチ開始位置のオフセット
    ユーザーがノード上の任意のポイントを掴むと、指とノードの中心が一致しません。そのまま移動させるとノードがジャンプしてしまいます。

  3. 複数タッチへの対応
    マルチタッチを許可した場合、どのタッチがどのノードに紐付くか管理するロジックが必要です。

本節では、上記課題を踏まえて「タッチ開始位置のオフセットを保持しつつ、座標変換を正しく行う」実装の全体像を示します。

SpriteKit で Node をタッチドラッグさせる実装手順

以下の手順で、シーン内の任意の SKSpriteNode をタッチでドラッグできるようにします。コードは Swift 5.8、Xcode 15 前提です。

ステップ 1: プロジェクトの準備とシーンの作成

  1. Xcode で「Game」テンプレート（SpriteKit）を選択し、言語は Swift にします。
  2. GameScene.swift が自動生成されますが、ここにドラッグ対象のノードを追加します。
Swift

import SpriteKit

class GameScene: SKScene {

    private var draggableNode: SKSpriteNode!
    // タッチとノードの紐付け情報
    private var activeTouch: UITouch?
    private var touchOffset = CGPoint.zero

    override func didMove(to view: SKView) {
        backgroundColor = .black

        // ドラッグ対象ノードの生成
        draggableNode = SKSpriteNode(color: .systemBlue, size: CGSize(width: 100, height: 100))
        draggableNode.position = CGPoint(x: size.width / 2, y: size.height / 2)
        addChild(draggableNode)
    }
}

ポイント: draggableNode をプロパティとして保持し、タッチ開始時にオフセットを計算できるようにします。

ステップ 2: touchesBegan でタッチ開始位置とオフセットを取得

ユーザーがノード上でタッチしたかどうかを判定し、オフセットを保存します。

Swift

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    // 既に別タッチがアクティブなら無視
    guard activeTouch == nil else { return }

    for touch in touches {
        let location = touch.location(in: self)

        // タッチ位置がノード内部にあるか判定
        if draggableNode.contains(location) {
            activeTouch = touch
            // オフセットは「タッチ位置 - ノード中心座標」
            let nodePosition = draggableNode.position
            touchOffset = CGPoint(x: location.x - nodePosition.x,
                                 y: location.y - nodePosition.y)
            // タッチが取得できたらループ抜ける
            break
        }
    }
}

ここで contains(_:) を使用してノード内部かどうかを簡単に判定し、touchOffset に指とノード中心の相対距離を保存します。

ステップ 3: touchesMoved でノードを追従させる

touchesMoved では、保持した activeTouch があるか確認し、オフセット分引いた座標をノードに設定します。

Swift

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    guard let touch = activeTouch, touches.contains(touch) else { return }

    let location = touch.location(in: self)

    // オフセット分を引いてノードの新しい座標を計算
    let newNodePos = CGPoint(x: location.x - touchOffset.x,
                             y: location.y - touchOffset.y)

    // 画面外に出ないように制限（Optional）
    let clampedX = max(draggableNode.size.width / 2,
                       min(size.width - draggableNode.size.width / 2, newNodePos.x))
    let clampedY = max(draggableNode.size.height / 2,
                       min(size.height - draggableNode.size.height / 2, newNodePos.y))

    draggableNode.position = CGPoint(x: clampedX, y: clampedY)
}

ポイント解説
- activeTouch が同一かどうか touches.contains(touch) で確認し、他のタッチイベントに影響されないようにします。
- touchOffset を引くことで、指がノードの中心に合わせてジャンプせず、掴んだ位置がそのまま維持されます。
- 画面端でノードがはみ出さないように clampedX / clampedY を計算しています。必要に応じて削除可能です。

ステップ 4: touchesEnded / touchesCancelled でタッチをリセット

タッチが終了したら保持している情報をクリアします。

Swift

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    guard let touch = activeTouch, touches.contains(touch) else { return }
    activeTouch = nil
    touchOffset = .zero
}

override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
    touchesEnded(touches, with: event)
}

ハマった点やエラー解決

1. タッチ座標がシーン座標系でなくノード座標系になっているケース

location(in:) に渡す引数を self（シーン）にしているか確認してください。誤って draggableNode を渡すと、ローカル座標が返り、意図しない位置にノードが飛びます。

2. 複数タッチ時に別の指がドラッグを妨げる

activeTouch を1つだけ保持し、他のタッチは無視するロジックを実装しました。マルチタッチで個別に複数ノードをドラッグしたい場合は、Dictionary<UITouch, SKNode> でタッチ‐ノードのマッピングを管理します。

3. ノードが画面外へはみ出す

上記ステップ3のクランプ処理で対処しましたが、物理エンジン（SKPhysicsBody）を付与している場合は node.physicsBody?.allowsRotation = false など、物理シミュレーションと位置更新の競合もチェックしてください。

解決策まとめ

  • 座標系の統一：常にシーン座標で取得し、必要なら convert(_:from:) で変換。
  • オフセット保持：タッチ開始時に指とノード中心の差分を保存し、移動時に差分を引く。
  • タッチ管理：activeTouch を保持し、同一タッチかどうかを判定。複数タッチ対応はマッピングで拡張可能。
  • 境界チェック：画面外に出ないように座標をクランプ。物理ボディがある場合はシミュレーションと手動更新の整合性を確保。

これらを組み合わせることで、スムーズで直感的なドラッグ操作が実装できます。

まとめ

本記事では、SpriteKit の touchesMoved を活用し、ノードを指でドラッグできる実装方法 をステップごとに解説しました。

  • タッチ開始時にオフセットを取得し、指がノードの中心にジャンプしないようにした。
  • シーン座標系で位置を取得し、必要に応じてローカル座標へ変換する手順を紹介。
  • マルチタッチ管理や画面端のクランプといった実装上の注意点と解決策を提示した。

この記事を読むことで、読者は 自作ゲームやインタラクティブアプリで直感的なドラッグ操作を実装できる というメリットを得られます。今後は、慣性やスナップ、UI 要素との統合 といった高度なタッチインタラクションについても取り上げる予定です。

参考資料