Jump to content

Pull X & Y co-ordinates from distance function?


Recommended Posts

you can calculate this by yourself - very simple equation (pseudocode):

const dx = this.sprite.position.x - game.scene.playerShip.sprite.position.x;
const dy = this.sprite.position.y - game.scene.playerShip.sprite.position.y;

and if you don't use negative deltas, just convert them into absolute values:

const dx = Math.abs(this.sprite.position.x - game.scene.playerShip.sprite.position.x);
const dy = Math.abs(this.sprite.position.y - game.scene.playerShip.sprite.position.y);


Link to comment
Share on other sites

Hi @PsichiX

Thanks for that, I think I'm trying to do something but as you see I'm not much of a programmer - especially when it comes to math lol.

I trying to tween an object from a point on the screen to a point in the circumference of a sprite in the middle of the screen.

So basically tween a sprite until it hits the circumference of the sprite in the middle.

I don't know how to describe it to find answers.

*** EDIT *** So I guess I need the x and y coordinates of the distance between A and B, minus A's and B's radius.

Link to comment
Share on other sites

Hi @PsichiX

Thanks :) Currently I have enemies spawning in a 360 degree circle 640 pixels from the centre, where the player ship sits.

I tween the enemies to the centre of the screen where the ship sits then bounce them back with another tween. I’m struggling with tweeting them only until they hit the ships circumference.

I tried to only post the relevant code ...

game.createClass('Enemy', {
    init: function(x, y) {
        this.sprite = new game.Sprite('enemy.png');
        this.sprite.position.set(x, y);
        game.Tween.add(this.sprite, {
            alpha: 1
        }, 1000, {
            easing: 'Linear.None'
        var xDistance = game.scene.playerShip.sprite.x - this.sprite.x;
        var yDistance = game.scene.playerShip.sprite.y - this.sprite.y;
        var distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
        this.tween1 = game.Tween.add(this.sprite, {
           x: 640,
           y: 640
        }, 2000, {
            easing: 'Quadratic.In'
        this.tween2 = game.Tween.add(this.sprite, {
           x: x,
           y: y
        }, 2000, {
            easing: 'Quadratic.Out'
        }).onComplete(function() {

game.createScene('Main', {
    num: 0,
    wave: 3,
    time: 2000,
    spinvaders: [],
    init: function() {
        this.stageSetup = new game.StageSetup();
        this.playerShip = new game.PlayerShip(640, 640);
        game.Timer.add(this.time, function() {
        }, true);
    addEnemy: function() {
        if (game.scene.num < game.scene.wave) {
            var numR = Math.random()*(2*Math.PI);
            var enemy= new game.Enemy(640+640*Math.cos(numR), 640+640*Math.sin(numR));
            game.scene.num ++;


Link to comment
Share on other sites


I think what you are looking for is to how to move object towards to specific point. You can do that easily by first calculating the angle between two Vectors (positions) and then use that angle to move your Sprite like you did before:

var angle = sprite1.position.angle(sprite2.position);

Live example:


(Click mouse to set red circle to random place, you can see that it always moves towards the green circle)

Link to comment
Share on other sites


First calculate the angle, then distance. Decrease the radiuses from the distance and you should be able to get the position from that:

var angle = sprite1.position.angle(sprite2.position);
var distance = sprite1.position.distance(sprite2.position) - radiuses;
var x = sprite1.position.x + distance * Math.cos(angle);
var y = sprite1.position.y + distance * Math.sin(angle);


Link to comment
Share on other sites

Hi @enpu

That works perfectly! Thanks for the help guys!!

One of my main issues is that I have quiet a limited time to work on my stuff and learning/researching these things is very time consuming.

I want to just sit down and make games - but sometimes it can be quite frustrating when you know that in order to do something, you have to relearn the Math you haven't used in years lol.

That's why tools like Construct 2/3 can be very easy to work with. They are not NEARLY as flexible as Panda, but they do make thing easy, if you don't have time to dig in to the details.

I think that maybe for the future it would be awesome to have a bunch of behaviours/classes for Panda that makes various bits easier.

Some examples -

Send sprite to point

Sprite follow mouse

Send sprite in direction


I think that these sort of classes would be very useful, if you're not a 'programmer' - like me :)

Link to comment
Share on other sites

@PsichiX You are thinking now a bit too complicated ;)

@Ninjadoodle That's why there is lot's of functions in the Vector class (position is instance of Vector), so you don't have to know how to calculate all the stuff yourself.

I just added new "move" method to Vector, which changes the vector's values based on distance and angle. Angle can be defined as radians or as a another vector. This way you can easily move your sprite towards another sprite with just one line:

// Change sprite1 position 100 pixels towards sprite2 position
sprite1.position.move(100, sprite2.position);

Now the stuff you were looking above should be a bit easier. Here is live example: https://www.panda2.io/examples#misc-example3

Link to comment
Share on other sites

  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...