Jump to content

Create sprite at x/y of sprite inside a container


Recommended Posts

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!

Link to comment
Share on other sites

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

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..

Link to comment
Share on other sites

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.ship = new game.Sprite('ship.png');

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.rotation = game.scene.playerShip.sprite.rotation;
        game.Timer.add(2000, this.remove.bind(this));
    remove: function() {
    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) {


Link to comment
Share on other sites


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;

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

var pos = new game.Vector();

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

// Or shorter



Link to comment
Share on other sites

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...