如何在 Phaser 3 中动态拉伸图像？

Question

我正在尝试动态拉伸图像，使其在我的 Phaser 3 游戏中朝一个方向扩展。我试过将 Tween 与 scaleX 一起使用，但出现问题。

第一个是我有的。我想要拉伸的 Phaser 中的图像对象。第二栏是我使用 scaleX 时发生的情况。我想这是通常应该发生的事情，但不是我需要的。我需要它，就像第三条一样。图像的左侧应保持对齐，只有右侧应拉伸。我还想在动画中这样做，所以它应该是我可以与补间或类似解决方案一起使用的东西。它需要可以在任何角度进行，所以我不能只改变 x 位置。它必须可以在任何角度，当我不知道角度将是什么时。

有人知道怎么做吗？

Answer 1

我不确定你的代码是什么样的，但我会这样解决它：
（如果我必须使用 scaleX 和 tween）

虽然我不知道： 你 want/need/mean 和 "...在任何角度.. .，这里know/see你的代码会很好。

只需将游戏对象的原点设置为0，因为默认为中心
调整x位置以补偿新原点位置。

这是一个可运行的例子：
（Tween 开始 scaleX = 0 以更好地说明原点在哪里）

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/phaser@3.55.2/dist/phaser.min.js"></script>

更新：
为清楚起见，示例中的来源现在已标记为黄色点。

如何在 Phaser 3 中动态拉伸图像？

How do I dynamically stretch an image in Phaser 3?

javascript

image

phaser-framework