Pull X & Y co-ordinates from distance function?

[Ninjadoodle]

Hi @enpu

Is it possible to get x / y co-ordinates from the distance function?

var distance = this.sprite.position.distance(game.scene.playerShip.sprite.position);

Thank you

[PsichiX]

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);

 

[Ninjadoodle]

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.

[PsichiX]

hmm, i think i know proper solution for that but it requires you to show me your current code for movement and then i'll show you my solution and explain it

[Ninjadoodle]

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);
        this.sprite.anchorCenter();
        this.sprite.addTo(game.scene.mg);
        
        game.Tween.add(this.sprite, {
            alpha: 1
        }, 1000, {
            easing: 'Linear.None'
        }).start();
        
        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'
        }).start();
        
        this.tween2 = game.Tween.add(this.sprite, {
           x: x,
           y: y
        }, 2000, {
            easing: 'Quadratic.Out'
        }).onComplete(function() {
            this.tween1.start();
        }.bind(this)).stop();
        
        this.tween1.chain(this.tween2);
    }
});

game.createScene('Main', {
    
    num: 0,
    wave: 3,
    time: 2000,
    
    spinvaders: [],
    
    init: function() {
        
        this.stageSetup = new game.StageSetup();
        this.stageSetup.setupStage();
        this.stageSetup.containers();
        
        this.playerShip = new game.PlayerShip(640, 640);
        
        game.Timer.add(this.time, function() {
            
            game.scene.addEnemy();
            
        }, 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));
            this.enemies.push(enemy);
            game.scene.num ++;
        }
    },

 

[enpu]

@Ninjadoodle

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:

https://www.panda2.io/examples#misc-example2

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

[Ninjadoodle]

Hi @enpu

Thank you for the snippet - the part I'm struggling with is having the circle to only move to the point where the circles touch. I need the x y co-ordinates, of that point but I'm having trouble figuring it out.

[enpu]

@Ninjadoodle

So stop the movement when the circles touch?

Edit: Ah so you need to co-ordinates of the point where the circles touch?

[Ninjadoodle]

@enpu - yeah I'm tweening a circle to the middle of the screen - just like your example minus both of the circles radius(es) / radii.

 

[enpu]

@Ninjadoodle

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);

 

[Ninjadoodle]

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

etc.

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

[PsichiX]

those should be possible to do as plugin with Promise actions - simple, chainable tasks.

[enpu]

@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

[Ninjadoodle]

@enpu

Thanks for doing that, I appreciate all the hard work you are putting into this amazing engine, it's mainly my lack of time to learn the ins and outs properly, that are causing me issues - nothing to do with this incredible engine.

 

[jylauril]

@enpu I downloaded the trial version yesterday and it looks like the position.move is not there.
Is this an upcoming feature or purposefully left out of the trial?

 

[enpu]

@jylauril

That function is still not in the major version of the game engine, so you will need to update to the latest dev version.

Turn on "Update to dev version" from settings and then open your project and click on the Update button:

[enpu]

@jylauril

Just released new major version 2.6.0, which includes the move function. So no need to update to dev version.

[jylauril]

@enpu

Nice! Thank you! To be perfectly honest, I did not even find settings in this trial version..
the usualy Mac's Command+, revealed some settings, but it did not have the dev option.

But now I got the .move working, so all is good!

[enpu]

@jylauril

You can find settings button from the startup screen: