Function: moveTo();

[lajbel]

It would be fine some function that would simplify that an object moves to a certain position.

obj.moveTo(xPos, yPos, xVel, yVel);

[slmjkdbtl]

If user already provide xVel and yVel, do you mean like

obj.move(xVel, yVel);
// then make sure didn't go pass vec2(xPos, yPos)

So if obj.pos = vec2(0, 0), then obj.moveTo(100, 100, -10, -10), does that mean it'll never reach the destination? Or do you mean xVel and yVel should always be positive and always move towards the destination

[lajbel]

I would say that the speed is always pointing to the point, that I calculate if it should go forward or backwards

xDir;
yDir;

if(obj.pos.x > xPos) xDir = -1;
else xDir = 1;

if(obj.pos.y > yPos) yDir = -1;
else yDir = 1;

action(() => {
  if(obj.pos.x.toFixed() != xPos) {
    obj.move(xVel * xDir, 0)
  }
  if(obj.pos.y.toFixed() != yPos) {
    obj.move(0, yVel * yDir)
  }
})

The example is to be better understood, that code would not work so much if someone wants the object to move to a position in float

[slmjkdbtl]

Added the function in style of

// speed is in pixels per second, if not given will teleport instantly
moveTo(dest: Vec2, speed?: number);

(couldn't think of a case where xVel and yVel is different if something is moving towards a destination 🤔 , lmk if i'm wrong)

it's on kaboom@next now

[lajbel]

moveTo is for the object to move to a specific part, as if it were an enemy I want it to move to vec2(15, 15) and he is in vec2(9, 9)

Instead of doing something like this:

let newPos = {x: 15, y: 15};
let speed = {x: 200, y: 170};

const cancelMoveTo = action(() => {
   if(obj.pos.x.toFixed() != newPos.x) {
       if(obj.pos.x > newPos.x) {
           obj.move(-speed.x, 0)
       }
       else {
           obj.move(speed.x, 0)
       } 
   }
   
   if(obj.pos.y.toFixed() != newPos.y) {
       if(obj.pos.y > newPos.y) {
           obj.move(-speed.y, 0)
       }
       else {
           obj.move(speed.y, 0)
       } 
   }
   
   if(obj.pos.x.toFixed() == newPos.x && obj.pos.y.toFixed() == newPos.y) {
       cancelMoveTo();
   };
});

You Do this:

moveTo(vec2(15, 15), vec2(200, 170)}); // ToPos and Speed

[slmjkdbtl]

I did it in the style of

const obj = add([
    pos(),
]);

obj.action(() => {
    // move towards dest every frame at the speed of 12, stop if reached
    obj.moveTo(dest, 12);
});

which is similar to move to be intuitive

i don't quite get manually passing xVel and yVel if the destination is already given, wouldn't it be gliding weirdly at the end if you pass manual value instead of calculating it?

[lajbel]

Sure, it makes more sense, a move but that stops when it reaches the limit, well, if you want you can leave it and do the calculation manually (dev of the game), or if not, add a configuration object to the move It worked, with that option to stop when you arrive at the destination automatically

obj.move(14, 14, {des: vec2(13, 13)});

[slmjkdbtl]

This is different from move that the velocity is calculated from the destination like

const dir = dest.sub(this.pos).unit();
const vel = dir.scale(speed);
this.pos = this.pos.add(vel);

the full code of a point click movement:

const k = kaboom();

// load mark sprite
k.loadMark();

// add to screen
const player = k.add([
	k.sprite("mark"),
	k.pos(),
	k.origin("center"),
]);

let dest = k.vec2(0);

player.action(() => {
	player.moveTo(dest, 10);
});

k.mouseClick(() => {
	dest = k.mousePos();
});

[lajbel]

Ohh very cool, its fine