Phaser - 将面具应用于内部有精灵的组

时间:2017-06-08 12:04:55

标签: javascript phaser-framework

我在研究移相器的同时试图创建一个基本的老虎机,到目前为止,我已经想出了加载四行三个精灵,并向上滚动它们。理想情况下,只有三行是可见的(总共9个精灵),第四行只是缓冲区,因此当我将它移动到底部时顶部不会奇怪地消失。

我的所有精灵都被添加到一个组中,目的是掩盖组的顶部和底部。

enter image description here

到目前为止我的代码(缩短版):

this.comboBase是基础精灵,是老虎机的背景。

var comboMask = this.game.add.graphics(this.comboBase.x, this.comboBase.y);
comboMask.beginFill(0xffffff);
comboMask.drawRect(this.comboBase.x, this.comboBase.y + 170, this.comboBase.width, 85);
console.log(comboMask.width);

for (var i = 0; i < 4; i++) {
  var ranNum = Math.floor((Math.random() * 3) + 1);
  var arrowRight;
  var arrowDown;
  var arrowLeft;
  if (ranNum == 1) {
    arrowRight = this.game.add.sprite(this.comboBase.x - 85, arrowY, 'ui');
    arrowDown = this.game.add.sprite(this.comboBase.x, arrowY, 'ui');
    arrowLeft = this.game.add.sprite(this.comboBase.x + 85, arrowY, 'ui');        
    this.comboRouletteList1.push(arrowRight);
    this.comboRouletteList2.push(arrowDown);
    this.comboRouletteList3.push(arrowLeft);
  }
  else if (ranNum == 2) {
    // Different arrangement     
    this.comboRouletteList1.push(arrowDown);
    this.comboRouletteList2.push(arrowLeft);
    this.comboRouletteList3.push(arrowRight);
  }
  else if (ranNum == 3) {
    //Different arrangement     
    this.comboRouletteList1.push(arrowLeft);
    this.comboRouletteList2.push(arrowRight);
    this.comboRouletteList3.push(arrowDown);
  }

  arrowY += 85;
  arrowRight.anchor.set(0.5, 0.5);
  arrowDown.anchor.set(0.5, 0.5);
  arrowLeft.anchor.set(0.5, 0.5);
  arrowRight.frameName = 'ui_specialR.png';
  arrowDown.frameName = 'ui_specialD.png';
  arrowLeft.frameName = 'ui_specialL.png';
  this.comboRouletteGroup.add(arrowRight);
  this.comboRouletteGroup.add(arrowDown);
  this.comboRouletteGroup.add(arrowLeft);
}    

this.comboRouletteGroup.add(this.comboTop);
this.comboRouletteGroup.mask = comboMask;

但它不是隐藏底行,而是使整个组不可见。

我试过改变drawRect和初始x / y的坐标,但是我不能为我的生活弄清楚我哪里出错了,因为它看不见了,我还在猜测。

var comboMask = this.game.add.graphics(this.comboBase.x, this.comboBase.y + this.comboBase.height);
comboMask.beginFill(0xffffff);
comboMask.drawRect(comboMask.x, comboMask.y, this.comboBase.width, 100);

有什么建议吗?

0 个答案:

没有答案