Pixi.js: 마우스 이동 시 스프라이트 앵커 위치에서 마우스에 스프라이트 스냅

에 만든 2013년 06월 23일 · 5코멘트 · 출처: pixijs/pixi.js

드래그(mousemove)할 때 마우스가 있는 스프라이트의 위치에 관계없이 스프라이트는 마우스 포인터가 이제 스프라이트의 앵커 위치에 있도록 위치를 변경합니다.
더 큰 스프라이트의 경우 이 이동이 상당히 거슬립니다.
마우스 포인터가 앵커 위치에 있을 필요가 없는 것이 좋습니다. 내부적으로는 스프라이트의 마우스 위치와 상관없이 계산 등을 위해 앵커 위치를 유지해야 합니다.
샘플 코드와 이미지가 첨부되어 있습니다. 재생산에 대한 참고 사항:
- 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

안녕하세요,

이것은 내 문제를 해결하고 훨씬 더 명확하게 이해할 수 있습니다. 감사합니다. 그리고 예, 제 코드는 예제의 작동 방식을 기반으로 하므로 예제를 업데이트할 수 있다면 좋을 것입니다. 작동 방식을 이해하는 데 어려움을 겪었던 기억이 납니다. 완전히 작동하지 않은 것 같습니다. :피

관련 질문입니다. 마우스를 올릴 때 상호 작용 데이터를 null로 설정해야 합니까?

또한 getLocalPosition이 언제 필요한지, 현재 위치만 필요한지 아직 확실하지 않습니다.

추신. 걱정하지 마십시오. 버그 보고서 세부 정보, 최소한 내가 할 수 있습니다. 도서관을 제공해주셔서 감사합니다. :)

kva1966 에 2013년 06월 23일

getLocalPosition 의 이유는 마우스 이벤트의 절대 좌표를 DisplayObjects가 사용하는 로컬 상대 좌표로 변환하기 위함입니다. 각 DisplayObject의 위치는 부모에 상대적이므로 절대 마우스 좌표를 가져와 this.data.getLocalPosition(this.parent) 를 사용하여 부모에 상대적으로 변환합니다.

마우스업 시 this.data = null 를 특별히 설정할 필요는 없습니다. 실제로 각 함수에 data 매개변수를 사용할 수 있어야 하며 this.data 는 전혀 사용하지 않아야 합니다.

englercj 에 2013년 06월 23일

👍1

도움을 주셔서 다시 한 번 감사드립니다. 그래픽 라이브러리에 매우 새로운 기능이므로 다양한 구현 선택 사항을 이해해야 합니다. 시간을 내어 제 질문에 적시에 답변해 주신 pixi 개발자에게 감사드립니다.

kva1966 에 2013년 06월 23일

이 스레드는 닫힌 후 최근 활동이 없었기 때문에 자동으로 잠겼습니다. 관련 버그에 대한 새 문제를 여십시오.

lock[bot] 에 2019년 02월 27일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Pixi.js: 마우스 이동 시 스프라이트 앵커 위치에서 마우스에 스프라이트 스냅

가장 유용한 댓글

모든 5 댓글

관련 문제