CODEWITHSUNDEEP
javascriptimagephaser-framework
NarutoProgrammer
NarutoProgrammer

Reputation: 115

How do I dynamically stretch an image in Phaser 3?

I'm trying to stretch an image dynamically so it expands in one direction in my Phaser 3 game. I've tried using a Tween with scaleX but there's a problem.

enter image description here

The first one is what I have. An image object in Phaser that I want to stretch. The second bar is what happens when I use scaleX. I guess it's what normally should happen, but not what I need. I need it like bar three. The left side of the image should stay aligned and only the right side should stretch. ALso I want to do this in an animation, so it should be something I can use with tweens or similar solutions. It needs to be possible to do it on any angle, so I can't just change the x-position. It has to be possible at any angle, when I don't know what the angle is going to be.

Does anyone know how to do that?

Upvotes: 1

Views: 1407

Answers (1)

winner_joiner
winner_joiner

Reputation: 14795

I'm not sure how your code looks like, but here is how I would solve it:
(If I would have to use scaleX and tween)

Although I don't know: what you want/need/mean with the "...on any angle..., here to know/see your code would be good.

  • just set the origin of the gameObject to 0 since the default is center
  • adjust the x position to compensate for the new origin position.

Here a runnable example:
(Tween starts a scaleX = 0 to better illustrate, where the origin is)

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: '#ffffff',
    scene: {
        create: create
    }
};

var game = new Phaser.Game(config);



function create ()
{

    var original = this.add.rectangle(225, 75, 200, 50, 0x0);
    var defaultOrigin = this.add.rectangle(225, 150, 200, 50, 0x0);

    // calculate the offset -100 = half width
    var setOrigin = this.add.rectangle(225 - 100, 200, 200, 50, 0x0).setOrigin(0);
    
    var setOriginAtAnAngle = this.add.rectangle(225 - 100, 275, 200, 50, 0x0)
    .setOrigin(0)
    .setAngle(25);
    
    var setOriginAtAnAngle2 = this.add.rectangle(225 - 100, 375, 200, 50, 0x0)
    .setOrigin(0, .5)
    .setAngle(25);    
    
    // rotation in degrees
    //setOriginAtAnAngle.angle = 25;
    
    /* origin point */
    this.add.rectangle(225, 75, 5, 5, 0xFFA701).setOrigin(0.5);
    this.add.rectangle(225, 150, 5, 5, 0xFFA701).setOrigin(0.5);
    this.add.rectangle(225 - 100, 200, 5, 5, 0xFFA701).setOrigin(0.5);
    this.add.rectangle(225 - 100, 275, 5, 5, 0xFFA701).setOrigin(0.5);
    this.add.rectangle(225 - 100, 375, 5, 5, 0xFFA701).setOrigin(0.5, 1);
    
    /* Just code to improve the display */
    this.add.line(0, 0, 150, 25, 150, 400, 0x0000ff).setOrigin(0);
    this.add.text(150, 75, ' Base Box', { fontFamily: 'Arial', fontSize: '20px', color:  '#fff' }).setOrigin(0, .5);
    this.add.text(150, 150, ' Origin: default (Center)', { fontFamily: 'Arial', fontSize: '20px', color:  '#f00' }).setOrigin(0, .5);
    this.add.text(150, 200, ' Origin: 0 (TopLeft)', { fontFamily: 'Arial', fontSize: '20px', color:  '#0f0' }).setOrigin(0, -.5);
    
        this.add.text(150, 290, ' Origin: 0 (TopLeft) with angle', { fontFamily: 'Arial', fontSize: '20px', color:  '#0f0' })
        .setOrigin(0, -.5)
        .setAngle(25);
        this.add.text(150, 360, ' Origin: 0 (CenterLeft) with angle', { fontFamily: 'Arial', fontSize: '20px', color:  '#0f0' })
        .setOrigin(0, -.5)
        .setAngle(25);    
    
    this.text = this.add.text(100, 12, 'Click to replay tween!', { fontFamily: 'Arial', fontSize: '20px', color: '#0000ff', backgroundColor: '#ffffff', fontStyle:'Bold' });

    this.tween = this.tweens.add({

        targets: [defaultOrigin, setOrigin, setOriginAtAnAngle, setOriginAtAnAngle2],
        duration: 3000,
        scaleX:{from:0, to:2},
        ease: 'Power0',
        onStart: _ => this.text.setText('Tween is running!'),
        onActive: _ => this.text.setText('Tween is running!'),
        onComplete: _=> this.text.setText('Click to replay tween!')

    });
    
    this.input.on('pointerdown', _=> {
      if(!this.tween.isPlaying()){
        this.tween.restart();
      }
    })

}
canvas {
transform: scale(.5) translate(-50%, -50%)
}
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>

Update:
Origin's are now marked in the example, with a yellow point, for clarity.

Upvotes: 1

Related Questions