<!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>
λ¨Όμ μμΈν λ²κ·Έ 리ν¬νΈμ μν μ½λμ κ°μ¬λ립λλ€. λ§μ μ 보λ₯Ό μ»μ λ λ§μ λμμ΄ λ©λλ€!
λΆννλ μ΄κ²μ λ²κ·Έκ° μλλλ€. μ΄ λ¬Έμ λ λ§μ°μ€λ₯Ό μμ§μΌ λλ§λ€ μ€νλΌμ΄νΈμ μμΉλ₯Ό ββλ§μ°μ€μ μμΉλ‘ μ€μ νκΈ° λλ¬Έμ λ°μν©λλ€. μ€μ λ‘ λ°μν΄μΌ νλ μΌμ λ§μ°μ€ μμ§μμ λΈν λ‘ μ€νλΌμ΄νΈλ₯Ό μ λ°μ΄νΈν΄μΌ νλ€λ κ²μ λλ€. λ€μκ³Ό κ°μ΄ μλνμμμ€.
/*
* 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
μ λ§μ°μ€κ° _μ΄λ_ν μλ§νΌ(μ μμΉλ‘ μ€μ νμ§ μμ) μ€νλΌμ΄νΈ μμΉλ₯Ό μ
λ°μ΄νΈν λ€μ λ€μ λ²μ μν΄ μ μ₯λ λ§μ°μ€ μμΉλ₯Ό μ
λ°μ΄νΈν©λλ€. μ΄κ² λμμ΄ λκΈΈ λ°λλ€!
μλ νμΈμ,
μ΄κ²μ λ΄ λ¬Έμ λ₯Ό ν΄κ²°νκ³ ν¨μ¬ λ λͺ ννκ² μ΄ν΄ν μ μμ΅λλ€. κ°μ¬ν©λλ€. κ·Έλ¦¬κ³ μ, μ μ½λλ μμ μ μλ λ°©μμ κΈ°λ°μΌλ‘ νλ―λ‘ μμ λ₯Ό μ λ°μ΄νΈν μ μλ€λ©΄ μ’μ κ²μ λλ€. μλ λ°©μμ μ΄ν΄νλ λ° μ΄λ €μμ κ²ͺμλ κΈ°μ΅μ΄ λ©λλ€. μμ ν μλνμ§ μμ κ² κ°μ΅λλ€. :νΌ
κ΄λ ¨ μ§λ¬Έμ λλ€. λ§μ°μ€λ₯Ό μ¬λ¦΄ λ μνΈ μμ© λ°μ΄ν°λ₯Ό nullλ‘ μ€μ ν΄μΌ ν©λκΉ?
λν getLocalPositionμ΄ μΈμ νμνμ§, νμ¬ μμΉλ§ νμνμ§ μμ§ νμ€νμ§ μμ΅λλ€.
μΆμ . κ±±μ νμ§ λ§μμμ€. λ²κ·Έ λ³΄κ³ μ μΈλΆ μ 보, μ΅μν λ΄κ° ν μ μμ΅λλ€. λμκ΄μ μ 곡ν΄μ£Όμ μ κ°μ¬ν©λλ€. :)
getLocalPosition
μ μ΄μ λ λ§μ°μ€ μ΄λ²€νΈμ μ λ μ’νλ₯Ό DisplayObjectsκ° μ¬μ©νλ λ‘컬 μλ μ’νλ‘ λ³ννκΈ° μν¨μ
λλ€. κ° DisplayObjectμ μμΉλ λΆλͺ¨μ μλμ μ΄λ―λ‘ μ λ λ§μ°μ€ μ’νλ₯Ό κ°μ Έμ this.data.getLocalPosition(this.parent)
λ₯Ό μ¬μ©νμ¬ λΆλͺ¨μ μλμ μΌλ‘ λ³νν©λλ€.
λ§μ°μ€μ
μ this.data = null
λ₯Ό νΉλ³ν μ€μ ν νμλ μμ΅λλ€. μ€μ λ‘ κ° ν¨μμ data
맀κ°λ³μλ₯Ό μ¬μ©ν μ μμ΄μΌ νλ©° this.data
λ μ ν μ¬μ©νμ§ μμμΌ ν©λλ€.
λμμ μ£Όμ μ λ€μ ν λ² κ°μ¬λ립λλ€. κ·Έλν½ λΌμ΄λΈλ¬λ¦¬μ λ§€μ° μλ‘μ΄ κΈ°λ₯μ΄λ―λ‘ λ€μν ꡬν μ ν μ¬νμ μ΄ν΄ν΄μΌ ν©λλ€. μκ°μ λ΄μ΄ μ μ§λ¬Έμ μ μμ λ΅λ³ν΄ μ£Όμ pixi κ°λ°μμκ² κ°μ¬λ립λλ€.
μ΄ μ€λ λλ λ«ν ν μ΅κ·Ό νλμ΄ μμκΈ° λλ¬Έμ μλμΌλ‘ μ κ²Όμ΅λλ€. κ΄λ ¨ λ²κ·Έμ λν μ λ¬Έμ λ₯Ό μ¬μμμ€.
κ°μ₯ μ μ©ν λκΈ
λ¨Όμ μμΈν λ²κ·Έ 리ν¬νΈμ μν μ½λμ κ°μ¬λ립λλ€. λ§μ μ 보λ₯Ό μ»μ λ λ§μ λμμ΄ λ©λλ€!
λΆννλ μ΄κ²μ λ²κ·Έκ° μλλλ€. μ΄ λ¬Έμ λ λ§μ°μ€λ₯Ό μμ§μΌ λλ§λ€ μ€νλΌμ΄νΈμ μμΉλ₯Ό ββλ§μ°μ€μ μμΉλ‘ μ€μ νκΈ° λλ¬Έμ λ°μν©λλ€. μ€μ λ‘ λ°μν΄μΌ νλ μΌμ λ§μ°μ€ μμ§μμ λΈν λ‘ μ€νλΌμ΄νΈλ₯Ό μ λ°μ΄νΈν΄μΌ νλ€λ κ²μ λλ€. λ€μκ³Ό κ°μ΄ μλνμμμ€.
μ€μν λΉνΈλ
mousedown
μ μμ΅λλ€. λ§μ°μ€μ μμΉλ₯Ό ββμ μ₯ν λ€μmousemove
μ λ§μ°μ€κ° _μ΄λ_ν μλ§νΌ(μ μμΉλ‘ μ€μ νμ§ μμ) μ€νλΌμ΄νΈ μμΉλ₯Ό μ λ°μ΄νΈν λ€μ λ€μ λ²μ μν΄ μ μ₯λ λ§μ°μ€ μμΉλ₯Ό μ λ°μ΄νΈν©λλ€. μ΄κ² λμμ΄ λκΈΈ λ°λλ€!