Question

如何在 Phaser 3 中缩放群组

2019-08-20

4863

game-engine game-physics phaser-framework

在 Phaser 2 中，我们通过设置 scale 属性来缩放简单对象，如文档中所述：

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

但在 Phaser v3 中没有等效项。

可能的 URL 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');

Answer 1

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

GroupConfig API 参考。您还可以在此处查看现场演示。

对于您而言，要缩放此组，只需像这样创建它：

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

或者，您可以在创建组后对其进行迭代，并单独缩放每个子对象。

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

Answer 2

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/[email protected]/dist/phaser.js"></script>