Phaser 3 - 如何创建平滑的缩放效果

Question

如何制作缩放效果而不是即时缩放？

您好，我目前正在开发一款游戏，当条件为真时会放大。为此，我遵循了这个 link.

https://rexrainbow.github.io/phaser3-rex-notes/docs/site/camera/

camera = this.cameras.main;

if (condition) {
  camera.setZoom(3);
  camera.zoom = 3;
}

可以，但是没有 transition/animation 缩放。它只是简单地放大了。

如何制作缩放效果而不是即时缩放？

Answer 1

您可以玩平移调用并将 'Power2' 替换为 :

弹性
Sine.easeInOut
或留空

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,    loader: {
      baseURL: 'https://raw.githubusercontent.com/nazimboudeffa/assets/master/',
      crossOrigin: 'anonymous'
    },
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('map', 'pics/hyrule.png');
}

function create ()
{
    this.cameras.main.setBounds(0, 0, 1024, 1024);
    
    this.add.image(0, 0, 'map').setOrigin(0);

    this.cameras.main.setZoom(1);
    this.cameras.main.centerOn(0, 0);

    this.input.on('pointerdown', function () {

        var cam = this.cameras.main;

            cam.pan(500, 500, 2000, 'Power2');
            cam.zoomTo(4, 3000);

    }, this);
}

<script src="//cdn.jsdelivr.net/npm/phaser@3.17.0/dist/phaser.min.js"></script>

Phaser 3 - 如何创建平滑的缩放效果

Phaser 3 - How to create smooth zooming effect

phaser-framework