Pixi.js: Sprite se ajusta al mouse en la posición de anclaje del sprite en mousemove

Creado en 23 jun. 2013 · 5Comentarios · Fuente: pixijs/pixi.js

Al arrastrar (mousemove), independientemente de en qué parte del sprite se coloque el mouse, el sprite se reposiciona a sí mismo de manera que el puntero del mouse ahora se encuentra en la posición de ancla del sprite.
Para sprites más grandes, este cambio es bastante discordante.
Sería bueno no requerir que el puntero del mouse esté en la posición de anclaje. Internamente, la posición del ancla debe mantenerse para los cálculos, etc. independientemente de la posición del mouse en el objeto.
Se adjunta código de muestra e imagen. Notas sobre la reproducción:
- Código adaptado y simplificado del ejemplo de arrastre en pixi.js (Ejemplo 8).
- Descarga la imagen y cámbiale el nombre a "aboriginal-bunny.png" como se indica en el código.
- El punto de anclaje del conejito se establece en 0,1, 0,1
- Coloque el cursor del mouse en algún lugar cerca de la parte inferior del sprite, esencialmente en cualquier lugar lejos del punto de anclaje
- Al presionar el mouse, el alfa del sprite cambia, pero todo lo demás sigue igual, por lo que el problema no parece estar al presionar el mouse.
- A continuación, arrastre, comience a moverse con el botón del mouse presionado, solo un poco
- Tenga en cuenta el cambio repentino del sprite para que el mouse esté en su punto de anclaje.
- De ahora en adelante, el arrastre se mantiene con el mouse en este ancla.

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

Fuente

kva1966

Comentario más útil

En primer lugar, gracias por el informe de error detallado y el código de muestra, ¡ayuda mucho cuando recibimos tanta información!

Desafortunadamente, esto no es un error. Este problema se debe a que estableces la posición del sprite en la posición del mouse con cada movimiento del mouse (probablemente porque eso es lo que hace el ejemplo). Realmente, lo que debería suceder es que deberías actualizar tu sprite por el delta del movimiento del mouse. Prueba algo como esto:

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

Los bits importantes están en mousedown Guardo la ubicación del mouse, luego en mousemove actualizo la posición de mi sprite por cuánto se ha _movido_ el mouse (no lo configuro en la nueva posición), luego Actualizo la posición almacenada del mouse para la próxima vez. ¡Espero que esto ayude!

englercj en 23 jun. 2013

👍2

Todos 5 comentarios

En primer lugar, gracias por el informe de error detallado y el código de muestra, ¡ayuda mucho cuando recibimos tanta información!

        /*
         * 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 en 23 jun. 2013

👍2

Hola,

Esto resuelve mi problema y es mucho más claro de entender, gracias. Y sí, mi código se basa en cómo funciona el ejemplo, por lo que sería bueno si el ejemplo pudiera actualizarse. Recuerdo que tuve problemas para entender cómo funcionaba, supongo que no funcionó por completo. :PAGS

Una pregunta relacionada, ¿es estrictamente necesario establecer los datos de interacción en nulos al colocar el mouse hacia arriba?

Tampoco tengo claro cuándo se requiere getLocalPosition, frente a solo la posición actual.

PD. no se preocupe con respecto a: detalle del informe de error, al menos puedo hacer. Gracias por proporcionar la biblioteca. :)

kva1966 en 23 jun. 2013

La razón de getLocalPosition es transformar las coordenadas absolutas del evento del mouse, en las coordenadas relativas locales que usan DisplayObjects. La posición de cada DisplayObject es relativa a su padre, por lo que tomamos las coordenadas absolutas del mouse y las transformamos para que sean relativas al padre con this.data.getLocalPosition(this.parent) .

No es particularmente necesario configurar this.data = null en mouseup. Realmente debería poder usar el data para cada función, y no usar this.data en absoluto.

englercj en 23 jun. 2013

👍1

De nuevo, gracias por tu ayuda; bastante nuevo en las librerías de gráficos, así que acepta varias opciones de implementación. Agradezco a los desarrolladores de pixi que se hayan tomado el tiempo de responder a mis preguntas de manera oportuna.

kva1966 en 23 jun. 2013

Este hilo se ha bloqueado automáticamente ya que no ha habido ninguna actividad reciente después de que se cerró. Abra un nuevo problema para errores relacionados.