如何在不通过对象掉落的情况下堆叠精灵元素

Question

我正在尝试堆叠一些精灵，假设它们是盒子，但是当我堆叠超过 5 个时，最低的精灵会穿过支撑物体掉落，好像这组的重量太重了.

我的想法是根据需要堆叠尽可能多的盒子，但似乎我缺少一些要告诉物理引擎的东西。

您可以在此处查看工作代码：https://codepen.io/dlaguna/pen/xMyzVW

var config = {
type: Phaser.AUTO,
width: 600,
height: 500,
physics: {
    default: 'arcade',
    arcade: {
      debug: true,
      gravity: { y: 200 }
    }
},
scene: {
    preload: preload,
    create: create
}
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('ground', 'https://4.bp.blogspot.com/-BzpfI1EyL4A/WrA98ayD7ZI/AAAAAAAABFA/Z1gjrdLqtRsG5O2Lp_n2odf0n_G-MVLQgCLcBGAs/s400/cccam%2Bspot.PNG');
    this.load.image('box', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8P5hVl0_rHaIVjVJcIVXvdsQtKJGOzW92KvuoDvaitnRX2POiWQ');
}

function create ()
{
  this.ground = this.physics.add.sprite(200, 470, 'ground');
  this.ground.setImmovable(true);
  this.ground.body.setAllowGravity(false);

  this.stack = this.physics.add.group();
  this.physics.add.collider( this.stack, this.ground);

  this.elem = this.physics.add.sprite(200, 425, 'box').setScale(2);
  this.elem.setMass(0.2);
  this.physics.add.collider( this.elem, this.stack);
  this.stack.add( this.elem );

  let numElems = 6;
  for (let i = 0; i < numElems; i++) {
    this.elem = this.physics.add.sprite(200, 425 - 50*(i+1), 'box').setScale(2);
    this.elem.setMass(0.2);
    this.physics.add.collider( this.elem, this.stack);
    this.stack.add( this.elem );
  }
}

将 numElems 变量更改为 5 显示了场景的工作方式。

Answer 1

您需要单独定制。 hint here。它似乎可以找到，但不确定它到底是如何工作的。

var config = {
type: Phaser.AUTO,
width: 600,
height: 500,
physics: {
    default: 'arcade',
    arcade: {
      debug: true,
      gravity: { y: 200 }
    }
},
scene: {
    preload: preload,
    create: create
}
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('ground', 'https://4.bp.blogspot.com/-BzpfI1EyL4A/WrA98ayD7ZI/AAAAAAAABFA/Z1gjrdLqtRsG5O2Lp_n2odf0n_G-MVLQgCLcBGAs/s400/cccam%2Bspot.PNG');
    this.load.image('box', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8P5hVl0_rHaIVjVJcIVXvdsQtKJGOzW92KvuoDvaitnRX2POiWQ');
}

function create ()
{
  this.ground = this.physics.add.sprite(200, 470, 'ground');
  this.ground.setImmovable(true);
  this.ground.body.setAllowGravity(false);

  this.stack = this.physics.add.group();
  this.physics.add.collider( this.stack, this.ground);

  let numElems = 8;
  for (let i = 0; i < numElems; i++) {
    this.elem = this.physics.add.sprite(200, 425 - 50*(i+1), 'box').setScale(2);
    this.elem.setMass(0.2);
    this.elem.customSeparateY = true;
    this.physics.add.collider(this.stack, this.elem, function (s1, s2) {
          var b1 = s1.body;
          var b2 = s2.body;

          if (b1.y > b2.y) {
              b2.y += (b1.top - b2.bottom);
              b2.stop();
          }
          else {
              b1.y += (b2.top - b1.bottom);
              b1.stop();
          }
      });

    this.stack.add( this.elem );
  }
}
    </script>

</body>
</html>

如何在不通过对象掉落的情况下堆叠精灵元素

How to stack sprite elements without being dropped thru object

javascript

phaser-framework