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

时间:2019-05-24 09:18:36

标签: phaser-framework

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

您好,我目前正在开发一款游戏,当条件为真时,它将放大。为此,我点击了此链接。

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

camera = this.cameras.main;

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

它有效,但是没有过渡/动画缩放。它只是简单地放大。

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

1 个答案:

答案 0 :(得分:2)

您可以进行紧急呼叫并将'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>