4

I was trying to create Moving circle using PIXIJs , which will move on mouse click event , its working but the problem is either it reaches x first or y position initially ,

the problem is it reaches the x or or y position which is closer to the circle , but i need to move the circle on same line towards the target (mouse clickd area)...

I did some calculations but that does not work ... any idea about moving circle to the straight line???

Here is my fiddle moving Circle

**

let xDestination = 100;
let yDestination = 100;

let app = new PIXI.Application(window.width,window.height);
document.body.appendChild(app.view);

let Graphics = new PIXI.Graphics();
Graphics.beginFill(0x00FFFF);
let rect = Graphics.drawCircle(20, 20, 20, 20);
let NewStage = new PIXI.Graphics();


NewStage.beginFill(0xFC7F5F);
let bodyy = NewStage.drawRect(0, 0, 500, 500);
bodyy.interactive = true;
rect.interactive = true;

app.stage.addChild(bodyy);
app.stage.addChild(rect);

let isMovingForward = true;

app.ticker.add(function(){
 if(rect.pivot.x !== xDestination && rect.pivot.y !== yDestination){
    if(rect.x > xDestination) {
    rect.x -= 5;
    } else {
    rect.x += 5;
    }
    if(rect.y > yDestination) {
    rect.y -= 5;
    } else {
    rect.y += 5;
    }
 }
})
bodyy.click = function(mouseData){
 xDestination = Math.round(mouseData.data.global.x -20);
 yDestination =  Math.round(mouseData.data.global.y -20);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>

**

Here is my JSfiddle

gman
  • 100,619
  • 31
  • 269
  • 393
Gopinath Kaliappan
  • 6,929
  • 8
  • 37
  • 60
  • The problem lies in your code that lives in the anonymous function called by this: _app.ticker.add(_ - You're always adding/subtracting 5 units. What you instead need to do is (a) get the current position (b) get the new position (c) calculate the difference between the two (d) divide this vector (x and y) by the number of frames you want to animate it in. Then, you'll have two different values to use for the delta X and Y values. ;) – enhzflep Aug 15 '17 at 02:59

2 Answers2

1

If you want to move circle center to current point then try this:

bodyy.click = function(mouseData){
       xDestination = Math.round(mouseData.data.global.x - 20);
       yDestination =  Math.round(mouseData.data.global.y - 20);
    }

20 - Radius of a circle

Ivan Minakov
  • 1,432
  • 7
  • 12
1

You move along a diagonal until either the x coordinate or y coordinate is equal to the destination, which is not want you want. Also if the two coordinates are not exactly equal, this causes the jagging effect.

Replace the entire nested if statement with:

rect.x -= (rect.x-xDestination)/10;
rect.y -= (rect.y-yDestination)/10;

which causes the circle to move directly along the line between the two points.

JMP
  • 4,417
  • 17
  • 30
  • 41