Pixi.js: スプライトは、mousemoveのスプライトアンカー位置でマウスにスナップします

作成日 2013年06月23日 · 5コメント · ソース: pixijs/pixi.js

ドラッグ（マウス移動）すると、マウスがスプライトのどこに配置されているかに関係なく、マウスポインターがスプライトのアンカー位置にくるように、スプライトが再配置されます。
より大きなスプライトの場合、このシフトはかなり不快です。
マウスポインタがアンカー位置にある必要がないのは良いことです。内部的には、スプライト上のマウスの位置に関係なく、計算などのためにアンカーの位置を維持する必要があります。
サンプルコードと画像を添付。複製に関する注記：
- pixi.jsのドラッグの例（例8）から適応および簡略化されたコード。
- 画像をダウンロードし、コードで参照されているように「aboriginal-bunny.png」に名前を変更します。
- バニーアンカーポイントは0.1、0.1に設定されています
- マウスカーソルをスプライトの下部に近い場所、基本的にアンカーポイントから離れた場所に置きます。
- マウスダウンすると、スプライトのアルファが変化しますが、他のすべては同じであるため、マウスダウンでは問題は発生しません。
- 次に、ドラッグします-マウスボタンを押したまま移動を開始します-少しだけ
- マウスがアンカーポイントにくるようにスプライトが突然シフトすることに注意してください。
- 以降、ドラッグはこのアンカーでマウスを使用して維持されます。

<!DOCTYPE HTML>
<html>
<head>
    <!-- Shamelessly adapted from pixi.js Example 8 - Dragging -->
    <title>Sprite to Mouse Snapping issue</title>
    <script src="pixi.js"></script>
</head>
<body>
    <script>

    var stage = new PIXI.Stage(0x97c56e, true);
    var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);

    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);
    renderer.view.style.position = "absolute";
    renderer.view.style.top = "0px";
    renderer.view.style.left = "0px";
    requestAnimFrame( animate );

    // create a texture from an image path
    var texture = PIXI.Texture.fromImage("aboriginal-bunny.png");

    createAboriginalBunny(100, 100);

    function createAboriginalBunny(x, y)
    {
        var bunny = new PIXI.Sprite(texture);
        bunny.setInteractive(true);

        // leaving anchor point at 10% to illustrate the problem clearer
        bunny.anchor.x = 0.1;
        bunny.anchor.y = 0.1;

        /*
         * Set-up dragging
         */     
        bunny.mousedown = bunny.touchstart = function(data)
        {
            this.data = data;
            this.alpha = 0.5;
            this.dragging = true;
        };

        bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data)
        {
            this.alpha = 1
            this.dragging = false;
            // set the interaction data to null
            this.data = null;
        };

        bunny.mousemove = bunny.touchmove = function(data)
        {
            if(this.dragging)
            {
                // need to get parent coords..
                var newPosition = this.data.getLocalPosition(this.parent);
                this.position.x = newPosition.x;
                this.position.y = newPosition.y;
            }
        }

        // move the sprite to initial pos
        bunny.position.x = x;
        bunny.position.y = y;

        stage.addChild(bunny);
    }

    function animate() {
        requestAnimFrame( animate );
        renderer.render(stage);
    }

    </script>

    </body>
</html>

aboriginal-bunny

ソース

kva1966

最も参考になるコメント

まず、詳細なバグレポートとサンプルコードをありがとうございます。たくさんの情報が提供されているととても助かります。

残念ながら、これはバグではありません。この問題は、スプライトの位置をマウスを動かすたびにマウスの位置に設定することで発生します（おそらくそれが例のようになっているためです）。実際には、マウスの動きのデルタによってスプライトを更新する必要があります。次のようなものを試してください。

        /*
         * Set-up dragging
         */     
        bunny.mousedown = bunny.touchstart = function(data)
        {
            this.data = data;
            this.alpha = 0.5;
            this.dragging = this.data.getLocalPosition(this.parent);;
        };

        bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data)
        {
            this.alpha = 1
            this.dragging = false;
            // set the interaction data to null
            this.data = null;
        };

        bunny.mousemove = bunny.touchmove = function(data)
        {
            if(this.dragging)
            {
                // need to get parent coords..
                var newPosition = this.data.getLocalPosition(this.parent);
                this.position.x += (newPosition.x - this.dragging.x);
                this.position.y += (newPosition.y - this.dragging.y);
                this.dragging = newPosition;
            }
        }

重要なビットはmousedownにあります。次に、マウスの位置を保存します。次に、 mousemoveに、マウスが_移動_した量（新しい位置に設定しない）でスプライトの位置を更新します。保存したマウスの位置を次回更新します。これがお役に立てば幸いです。

englercj 2013年06月23日

👍2

全てのコメント5件

まず、詳細なバグレポートとサンプルコードをありがとうございます。たくさんの情報が提供されているととても助かります。

        /*
         * Set-up dragging
         */     
        bunny.mousedown = bunny.touchstart = function(data)
        {
            this.data = data;
            this.alpha = 0.5;
            this.dragging = this.data.getLocalPosition(this.parent);;
        };

        bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data)
        {
            this.alpha = 1
            this.dragging = false;
            // set the interaction data to null
            this.data = null;
        };

        bunny.mousemove = bunny.touchmove = function(data)
        {
            if(this.dragging)
            {
                // need to get parent coords..
                var newPosition = this.data.getLocalPosition(this.parent);
                this.position.x += (newPosition.x - this.dragging.x);
                this.position.y += (newPosition.y - this.dragging.y);
                this.dragging = newPosition;
            }
        }

englercj 2013年06月23日

👍2

こんにちは、

これで私の問題は解決し、理解しやすくなりました。ありがとうございます。はい、私のコードは例がどのように機能するかに基づいているので、例を更新できれば良いでしょう-それがどのように機能するかを理解するのに苦労したことを思い出します、それは完全には機能しなかったと思います。：P

関連する質問ですが、マウスアップでインタラクションデータをnullに設定する必要がありますか？

また、getLocalPositionが必要な場合と、現在の位置だけが必要な場合についても、まだわかりません。

PS。心配はいりません。バグレポートの詳細、少なくとも私にはできます。ライブラリを提供していただきありがとうございます。 :)

kva1966 2013年06月23日

getLocalPositionの理由は、マウスイベントの絶対座標を、DisplayObjectsが使用するローカル相対座標に変換するためです。各DisplayObjectの位置はその親を基準にしているため、絶対的なマウス座標を取得し、 this.data.getLocalPosition(this.parent)を使用して親を基準にするように変換します。

mouseupでthis.data = nullを設定する必要は特にありません。本当にあなただけ使用することができるはずですdata paramは各機能に、そして使用しないでthis.dataまったく。

englercj 2013年06月23日

👍1

助けてくれてありがとう。グラフィックライブラリはかなり新しいので、さまざまな実装の選択に同意します。時間をかけて私の質問にタイムリーに答えてくれたpixi開発者に感謝します。

kva1966 2013年06月23日

このスレッドは、閉じられた後、最近のアクティビティがないため、自動的にロックされています。関連するバグについては、新しい問題を開いてください。

lock[bot] 2019年02月27日

このページは役に立ちましたか？

0 / 5 - 0 評価

Pixi.js: スプライトは、mousemoveのスプライトアンカー位置でマウスにスナップします

最も参考になるコメント

全てのコメント5件

関連する問題