Pixi.js: Sprite terkunci ke mouse pada posisi jangkar sprite di mousemove

Dibuat pada 23 Jun 2013 · 5Komentar · Sumber: pixijs/pixi.js

Saat menyeret (mousemove), di mana pun pada sprite mouse ditempatkan, sprite memposisikan dirinya sendiri sedemikian rupa sehingga penunjuk mouse sekarang berada di posisi jangkar sprite.
Untuk sprite yang lebih besar, perubahan ini cukup menggelegar.
Akan menyenangkan untuk tidak mengharuskan penunjuk tetikus berada di posisi jangkar. Secara internal, posisi jangkar harus dipertahankan untuk perhitungan, dll. terlepas dari posisi mouse pada sprite.
Contoh kode dan gambar terlampir. Catatan tentang reproduksi:
- Kode diadaptasi dan disederhanakan dari contoh dragging di pixi.js (Contoh 8).
- Unduh gambar dan ganti namanya menjadi "aboriginal-bunny.png" seperti yang dirujuk dalam kode.
- Titik jangkar kelinci diatur ke 0,1, 0,1
- Tempatkan kursor mouse di suatu tempat dekat dengan bagian bawah sprite, pada dasarnya di mana saja jauh dari titik jangkar
- Saat mousedown, alfa sprite berubah, tetapi yang lainnya sama, jadi masalahnya tidak muncul di mousedown.
- Selanjutnya, seret -- mulai bergerak dengan tombol mouse ke bawah -- sedikit saja
- Perhatikan pergeseran sprite yang tiba-tiba sehingga mouse berada pada titik jangkarnya.
- Selanjutnya, menyeret dipertahankan dengan mouse di jangkar ini.

<!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

Sumber

kva1966

Komentar yang paling membantu

Pertama-tama, terima kasih atas laporan bug terperinci dan kode sampelnya, ini sangat membantu ketika kami diberi begitu banyak informasi!

Sayangnya, ini bukan bug. Masalah ini disebabkan oleh Anda mengatur posisi sprite ke posisi mouse setiap gerakan mouse (kemungkinan besar karena itulah yang dilakukan contohnya). Sungguh, yang seharusnya terjadi adalah Anda harus memperbarui sprite Anda dengan delta gerakan mouse. Cobalah sesuatu seperti ini:

        /*
         * 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;
            }
        }

Bit-bit penting ada di mousedown Saya menyimpan lokasi mouse, kemudian pada mousemove saya memperbarui posisi sprite saya dengan seberapa banyak mouse _dipindahkan_ (tidak disetel ke posisi baru), lalu Saya memperbarui posisi mouse yang disimpan untuk waktu berikutnya. Saya harap ini membantu!

englercj pada 23 Jun 2013

👍2

Semua 5 komentar

Pertama-tama, terima kasih atas laporan bug terperinci dan kode sampelnya, ini sangat membantu ketika kami diberi begitu banyak informasi!

        /*
         * 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 pada 23 Jun 2013

👍2

Halo,

Ini menyelesaikan masalah saya, dan jauh lebih jelas untuk dipahami, terima kasih. Dan ya, kode saya didasarkan pada cara kerja contoh, jadi akan lebih baik jika contoh dapat diperbarui -- saya ingat mengalami kesulitan memahami cara kerjanya, kira itu tidak sepenuhnya berfungsi. :P

Pertanyaan terkait, apakah benar-benar perlu mengatur data interaksi ke nol pada mouseup?

Saya juga masih belum jelas kapan getLocalPosition diperlukan, vs. hanya posisi saat ini.

PS. jangan khawatir tentang: detail laporan bug, setidaknya yang bisa saya lakukan. Terima kasih telah menyediakan perpustakaan. :)

kva1966 pada 23 Jun 2013

Alasan getLocalPosition adalah untuk mengubah koordinat absolut acara mouse, menjadi koordinat relatif lokal yang digunakan DisplayObjects. Setiap posisi DisplayObject relatif terhadap induknya, jadi kami mengambil koordinat mouse absolut dan mengubahnya menjadi relatif terhadap induknya dengan this.data.getLocalPosition(this.parent) .

Tidak terlalu penting untuk menyetel this.data = null pada mouseup. Sungguh Anda harus dapat menggunakan param data untuk setiap fungsi, dan tidak menggunakan this.data sama sekali.

englercj pada 23 Jun 2013

👍1

Terima kasih sekali lagi atas bantuan Anda; cukup baru untuk lib grafis, jadi berdamai dengan berbagai pilihan implementasi. Hargai pixi devs yang meluangkan waktu untuk menjawab pertanyaan saya tepat waktu.

kva1966 pada 23 Jun 2013

Utas ini telah dikunci secara otomatis karena tidak ada aktivitas terbaru setelah ditutup. Silakan buka edisi baru untuk bug terkait.