Scaling a sprite with another sprite tweening inside?

[Ninjadoodle]

Hi @enpu / Panda People

I have a question about tweening and sprites inserted into other sprites.

I've created a timer bar and I would like to change the width of the whole bar to stretch to a width of the browser window (as the window is stretched).

I'm doing this inside the update function of the class.

Inside the timer bar there is another bar that is tweening it's width to 0.

When I try to change the width of the parent sprite, the tweening on the child sprite does not work as expected.

Is this possible?

Thank you in advance!

game.createClass('TimerBarBottom', {

    init: function() {
        
        this.xPos = 0 - (game.system.width / 2 - game.system.originalWidth / 2) + 50;
        this.yPos = game.system.originalHeight - 128 + (game.system.height / 2 - game.system.originalHeight / 2);
        
        this.bg = new game.Graphics();
        this.bg.fillColor = '#ff0000';
        this.bg.drawRect(0, 0, game.system.width - 100, 128);
        this.bg.position.set(this.xPos, this.yPos);
        this.bg.addTo(game.scene.fg);
        
        this.bar = new game.Graphics();
        this.bar.fillColor = '#ffff00';
        this.bar.drawRect(0, 0, game.system.width - 100, 128);
        this.bar.addTo(this.bg);
        
        this.fg = new game.Graphics();
        this.fg.fillColor = '#000000';
        this.fg.drawRect(0, 0, game.system.width - 100, 64);
        this.fg.alpha = 0.1;
        this.fg.addTo(this.bg);
    },
    
    start: function() {
        
        game.Tween.add(this.bar.scale, {
            x: 0
        }, 20000, {
            easing: 'Linear.None'
        }).start();
    },
    
    update: function() {
        
        this.bg.scale.set(game.system.width - 100, 128);
        this.bg.position.set(this.xPos, this.yPos);
    }
});

 

[enpu]

If you scale you Graphics object (this.bg), all it's childrens also get scaled (this.bar and this.fg). This is normal behavior.

You might want to rethink your logic there, does this.bar and this.fg have to be children's of this.bg?

[Ninjadoodle]

@enpu

Thank you for the reply, this makes sense and I will make some changes