[SOLVED] Preventing child sprites from changing their position with their parents rotation?

[Bonsaiheldin]

Hello there. ?

I have a sprite which rotates. And i have a healthbar added to that sprite as a child.

My problem is: The healthbar does what children are supposed to do! But i don't want that! ?

How to keep child sprites from rotating with their parent? I want it to always stay at the same position relative to the parents anchor.

I'm not talking about fixing its angle - that can be done by simply setting it to the negative angle of its parent each time it rotates (at least i don't know any other way).

I'm talking about its position. Is there a fixedToCamera equivalent for sprites?

If not, some math would be cool, too.

EDIT: I guess this could work with groups. But is there another way?

[samme]

You can use transformCallback but I think that's even more complicated.

I would either use a Group or else no containers at all (and update the healthbar's position manually).

[Bonsaiheldin]

39 minutes ago, samme said:

You can use transformCallback but I think that's even more complicated.

I would either use a Group or else no containers at all (and update the healthbar's position manually).

I see, thanks. For a quick fix i'm setting the healthbar's position manually for now, not having them as children of the players.
It's not so beautiful as the healthbar's position using player.update is done some time after the player''s movement (using velocity), meaning one can see how it is always 1 - 2 frames behind.

Gonna look into how a group would work here as i only have three groups yet, for the players, the bullets and the pickups.

[samme]

4 hours ago, Bonsaiheldin said:

It's not so beautiful as the healthbar's position using player.update is done some time after the player''s movement (using velocity), meaning one can see how it is always 1 - 2 frames behind.

See the preRender method in https://codepen.io/samme/pen/EwjMbG?editors=0010.

[Bonsaiheldin]

On 5/3/2018 at 10:33 PM, samme said:

See the preRender method in https://codepen.io/samme/pen/EwjMbG?editors=0010.

Nice, i didn't know about that handy method! ?

Unfortunately, even though it works in your example, for some reason it doesn't change the behaviour at my game. I copy the necessary parts involved in movements.

I don't know what is wrong here. I'm using Phaser-CE 2.10.3. Using position.copyFrom/To doesn't change it.

    update()
    {
        // Movement
        app.player.body.velocity.set(0);

        if (this.keyboard.isDown(Phaser.Keyboard.A)
         || this.keyboard.isDown(Phaser.Keyboard.LEFT))
        {
            app.player.body.velocity.x = -app.data.tanks[app.player.data.type].speed;
        }

        if (this.keyboard.isDown(Phaser.Keyboard.D)
         || this.keyboard.isDown(Phaser.Keyboard.RIGHT))
        {
            app.player.body.velocity.x = app.data.tanks[app.player.data.type].speed;
        }

        if (this.keyboard.isDown(Phaser.Keyboard.W)
         || this.keyboard.isDown(Phaser.Keyboard.UP))
        {
            app.player.body.velocity.y = -app.data.tanks[app.player.data.type].speed;
        }

        if (this.keyboard.isDown(Phaser.Keyboard.S)
         || this.keyboard.isDown(Phaser.Keyboard.DOWN))
        {
            app.player.body.velocity.y = app.data.tanks[app.player.data.type].speed;
        }

        // Collision
        this.physics.arcade.overlap(this.tanks, this.bullets, app.bulletHit, null, this);
        this.physics.arcade.overlap(this.tanks, this.expBubbles, app.expBubbleCollect, null, this);
    },

    // The preRender method is called after all Game Objects have been updated,
    // but before any rendering takes place.
    preRender()
    {
        // Fix the tank's healthbar's position
        this.tanks.forEachAlive(function(tank)
        {
            let healthbar = tank.data.healthbar;
            if (healthbar.visible)
            {
                healthbar.x = tank.x + healthbar.data.x;
                healthbar.y = tank.y + healthbar.data.y;

                //healthbar.position.copyFrom(tank);
                //healthbar.y += healthbar.data.y;
            }
        }, this);
    }

 

[samme]

I think you need 

this.tanks.updateTransform();

at the end of preRender().

[Bonsaiheldin]

On 5/5/2018 at 9:59 PM, samme said:

I think you need 

this.tanks.updateTransform();

at the end of preRender().

Yes, almost. I tried that without success and ended up using

healthbar.updateTransform();

It seems you have to updateTransform the sprites, or group respectively, you want to change.

That stuff is not really straight forward. I would never have thought about using such a function. ?

Thanks for your help! ✨ It now works as intended.

[samme]

2 hours ago, Bonsaiheldin said:

It seems you have to updateTransform the sprites, or group respectively, you want to change.

It's because preRender is quite late, and the transformation for the current frame has already been calculated.

Probably states need a postUpdate method for these things.

There's also