3

私はこれと2日間戦ってきました。私は ImpactJS と呼ばれる HTML5/JS ゲーム エンジンを使用しており、誰かがモバイル デバイス用のジョイスティック タッチ ゾーンを作成するための非常に便利なプラグインを作成しました。アイデアは、その領域に触れたときにジョイスティックがアクティブになる画面上のゾーンを指定することです。

私が使用しているプラ​​グインのコードはこちらです。「curPos」(ユーザーが現在タッチしている場所の x 座標と y 座標) を追加するように少し変更しましたが、それ以外のコードはすべて同じです。私はこの問題を自分で解決しようとしており、元の作成者に連絡していますが、現時点では連絡が取れないようで、どこにも行き着いていません.

ここで何か非常に悪いことをしていると確信していますが、タッチゾーンを単独で完全に機能させることはできますが、両方のジョイスティックを同時に使用しようとすると、部分的に互いに上書きされます.

ゲームの初期化時に、次のように 2 つのゾーンを指定しました。

    this.joystick1 = new TouchJoystickZone(0, 0, ig.system.width / 2, ig.system.height);
    this.joystick2 = new TouchJoystickZone(ig.system.width / 2, 0, ig.system.width / 2, ig.system.height);

this.joystick1 はプレイヤーの回転を担当します。this.joystick2 はプレイヤーの加速を担当します。私の Player エンティティには、2 つのジョイスティック用の次の移動コードがあります。繰り返しますが、これは、画面上に 1 本の指しかないか、使用しているジョイスティックが 1 つしかない場合に完全に機能します。

            if( ig.ua.mobile ) {
            // ROTATION
            if (ig.game.joystick1.touchStart.x > 0 && ig.game.joystick1.touchStart.x < ig.system.width/2) {
                if (Math.abs(ig.game.joystick1.delta.x) >= 50 || Math.abs(ig.game.joystick1.delta.y) >= 50) {
                    this.joystickAngle = ig.game.Controller.toDegrees(ig.game.Controller.joystickAngle());
                    if (this.angle > this.joystickAngle + 20) {
                        this.angle -= this.turnSpeed * ig.system.tick;
                    }

                    else if (this.angle < this.joystickAngle - 20) {
                        this.angle += this.turnSpeed * ig.system.tick;
                    }

                    else {
                        this.angle = this.joystickAngle;
                    }
                } 
            }

            // THRUST
            if (ig.game.joystick2.touchStart.x > ig.system.width / 2) {
                if (ig.game.joystick2.delta.y <= -50) {
                    this.accel.x = Math.cos(this.angle*Math.PI/180)*this.thrust;
                    this.accel.y = (Math.sin(this.angle*Math.PI/180)*this.thrust);
                    this.fuel -= 0.1;
                }

                else if (ig.game.joystick2.delta.y >= 50) {
                    this.accel.x = Math.cos(this.angle*Math.PI/180)*-this.thrust;
                    this.accel.y = (Math.sin(this.angle*Math.PI/180)*-this.thrust);
                    this.fuel -= 0.1;
                }

            }

            else {
                this.accel.x = 0;
                this.accel.y = 0;
            }
        }

ただし、2 本目の指を画面に置くとすぐに、最初のジョイスティックが上書きされます。回転してから移動するか、移動してから回転すると問題なく動作しますが、両方を同時に行う必要があります。

関連するジョイスティック 1 またはジョイスティック 2 だけでなく、他のスティックを使用するためにタップすると、touchStart.x と touchStart.y が両方のジョイスティックに設定されているように見えることがわかりました。そのジョイスティックのタッチが指定されたゾーン内にある場合。これが部分的に問題の一因になっていると思います。この段階で、私はこれを理解しようと何時間も費やしましたが、始めたときと同じように迷っています。

誰かがこれらのジョイスティックを同時に使用して正しい方向に向けることができますか?

4

2 に答える 2

2

使用しているジョイスティック スクリプトは、最初の指だけを探しています。以下は47-48行目から

    var x = ev.touches[0].pageX - pos.left,
        y = ev.touches[0].pageY - pos.top;

「0」は、追跡する指を決定します。

スクリプトは、どの指がどの要素にあるかを認識し、その指のみを追跡するように変更する必要があります。これは、最初に押された要素を特定するか、位置によって行うことができます。

JSFiddle の例: http://jsfiddle.net/7WR88/5/

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

于 2012-10-23T14:14:13.183 に答える
0

@Dcullenが述べたように、最初のタッチから始まる各イベントには複数のタッチが存在する場合があります。

ev.touchesコレクションを反復処理して、各タッチがホットゾーンに分類されるかどうかを確認するのは簡単なソリューションです。ホットゾーン1に該当する場合は、ジョイスティック1のタッチとして扱います。ホットゾーン2に該当する場合は、ジョイスティック2のタッチとして扱います。

これは、タッチが近くにある場合は常に正しいジョイスティックにマップされるため、タッチが表示される順序は重要ではないことを意味します。

于 2012-10-24T08:12:17.520 に答える