如何在Phaser 3中缩放组

时间:2019-08-20 03:23:43

标签: game-engine game-physics phaser-framework

在Phaser 2中,我们按照文档中的说明通过设置scale属性来缩放简单的对象:

https://phaser.io/examples/v2/groups/group-scale

但是Phaser v3中没有等效功能。

可能的网址https://phaser.io/examples/v3/groups/group-scale指向无内容。如果我这样做:

this.enemies = this.add.group();
this.enemies.scale.set(2, 2);

它抛出:

 Phaser v3.19.0 (WebGL | Web Audio)  https://phaser.io
indexph.js:22 Uncaught TypeError: Cannot read property 'set' of undefined

在Phaser 3中缩放一组子画面的合适形式是什么?

我认为,下面的代码应该可以工作,但是不会...。它不会缩放从组创建的对象:

preload() {
    this.load.atlas("sprites", "assets/spritesheet.png", "assets/spritesheet.json")
}

create() {


    this.enemies = this.add.group({
        key: 'sprites' ,                        
        setScale: { x: 0.1, y: 0.1 }
    });

    this.enemies.create(60, 60, 'sprites', 'hamburguer.png');

2 个答案:

答案 0 :(得分:2)

在Phaser 3中,可以通过修改声明组时传入的GroupConfig对象来缩放组。

GroupConfig API Reference。您还可以看到现场演示here

在您的情况下,要扩展此组,您只需按以下方式创建它即可:

this.enemies = this.add.group({
  setScale: { x: 2, y: 2}
});

或者,您可以在组创建后进行遍历,并独立缩放每个子对象。

this.enemies = this.add.group();
this.enemies.children.iterate((child) => {
  child.setScale(2, 2);
});

答案 1 :(得分:1)

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
    },
    physics: {
        default: 'arcade'
    }
};

var game = new Phaser.Game(config);

function preload ()
{
  this.load.image('alien1', 'sprites/phaser-alien.png');
  this.load.image('alien2', 'sprites/alien2.png');
}

function create ()
{ 
  this.enemies1 = this.add.group();
  this.enemies2 = this.add.group();
  
  for (let i = 0; i < 64; i++)
  {
    let x = Phaser.Math.Between(0, 400);
    let y = Phaser.Math.Between(0, 600);

    this.enemy1 = this.add.image(x, y, 'alien1');
    this.enemies1.add(this.enemy1);
  }
  
  for (let i = 0; i < 64; i++)
  {
    let x = Phaser.Math.Between(400, 800);
    let y = Phaser.Math.Between(0, 600);

    this.enemy2 = this.add.image(x, y, 'alien2');
    this.enemies2.add(this.enemy2);
  }
  
  console.log(this.enemies1.getLength())
  //console.log(this.enemies.getChildren())
  console.log(this.enemies1.getChildren()[2])
  
  for (let i = 0; i < 64; i++)
  { 
    this.enemies1.getChildren()[i].setScale(2);
  }
  
}
<script src="//cdn.jsdelivr.net/npm/phaser@3.19.0/dist/phaser.js"></script>