Create sprite at x/y of sprite inside a container

[Ninjadoodle]

Hi @enpu / Panda People

Just wondering how one would go about creating a sprite (bullet), at the x, y coordinates of a sprite inside a container?

Currently its not giving me the right co-ordinates and I think that some sort of global to local conversion might need to be done.

Thank you for any advice!

[PsichiX]

Hi, could you provide your current code related to creating bullets that you are using right now (that buggy one)?

[enpu]

Could you just subtract the sprite's parent position from the sprite's position?

sprite.addTo(container);
sprite.position.x = 100 - sprite.parent.position.x;
sprite.position.y = 100 - sprite.parent.position.y;

But then if your container hierarchy is more complicated, then that would not work. Maybe i should add some kind of toWorldPosition method to container, which would convert the current local position into world position..

[Ninjadoodle]

Hi @enpu / @PsichiX

Basically I have a round spaceship, that rotates around its center. The spaceship class has a spaceship body sprite and a gun sprite inside a container. I would like to create the bullet/laser at the gun x,y and not the ship body x,y.

game.createClass('PlayerShip', {
    
    init: function(x, y) {
        
        this.sprite = new game.Container().addTo(game.scene.mg);
        this.sprite.position.set(x, y);
        
        this.gun = new game.Sprite('gun.png');
        this.gun.anchor.set(52, 100);
        this.gun.position.set(0, -64);
        this.gun.addTo(this.sprite);
        
        this.ship = new game.Sprite('ship.png');
        this.ship.anchorCenter();
        this.ship.addTo(this.sprite);
    }
});

game.createClass('Laser', {
    
    init: function() {
        
        this.sprite = new game.Sprite('laser.png');
        
        this.sprite.position.set(game.scene.playerShip.sprite.x, game.scene.playerShip.sprite.y);
        this.sprite.anchorCenter();
        this.sprite.rotation = game.scene.playerShip.sprite.rotation;
        this.sprite.addTo(game.scene.bg);
        
        game.Timer.add(2000, this.remove.bind(this));
    },
    
    remove: function() {
        this.sprite.remove();
        game.scene.removeObject(this);
    },
    
    update: function() {
        this.sprite.position.x += game.scene.laserSpeed * Math.cos(this.sprite.rotation - (0.5 * Math.PI)) * game.delta;
        this.sprite.position.y += game.scene.laserSpeed * Math.sin(this.sprite.rotation - (0.5 * Math.PI)) * game.delta;
        
        // Reverse for loop
        for (var i = game.scene.spinvaders.length - 1; i >= 0; i--) {
            var enemy = game.scene.spinvaders[i];
            var distance = this.sprite.position.distance(enemy.sprite.position);
            if (distance < 64 + 128) {
                enemy.remove();
                this.remove();
            }
        }
    }
});

 

[enpu]

@Ninjadoodle

I have now added new toWorldPosition method to Container class.

You can use it to get world position of container (or anything that extends container, like sprite).

Use first parameter to set the world position into existing Vector (like container's position).

With second parameter set to true, the world position will be converted to local position.

For example, if you want your sprite to appear exactly at position 100, 100 (relative to the screen top left corner), no matter what the sprite's parent position is, you would use:

sprite.position.set(100, 100);
sprite.toWorldPosition(sprite.position, true);

Here is full example:

var container = new game.Container();
container.position.x = 100;
container.position.y = 100;
container.addTo(this.stage);

var sprite = new game.Sprite('panda.png');
sprite.position.x = 100;
sprite.position.y = 100;
sprite.addTo(container);

var pos = new game.Vector();

sprite.toWorldPosition(pos);
console.log(pos); // {x: 200, y: 200}

sprite.toWorldPosition(pos, true);
console.log(pos); // {x: 0, y: 0}

// Set sprite's local position to match world position 100,100
sprite.toWorldPosition(sprite.position, true);

So in your case:

this.sprite.position.set(game.scene.playerShip.sprite.x, game.scene.playerShip.sprite.y);

// Change to

var pos = game.scene.playerShip.gun.toWorldPosition();
this.sprite.position.set(pos);

// Or shorter

game.scene.playerShip.gun.toWorldPosition(this.sprite.position);

 

[Ninjadoodle]

@enpu - Awesome thanks for this