Фазер 3 лобзик кусочки головоломки - PullRequest
Новая
       9

Фазер 3 лобзик кусочки головоломки

0 голосов
/ 07 декабря 2018

Я работаю над игрой-головоломкой, используя Phaser 3 , и у меня возникают проблемы с частотой кадров при перетаскивании на мобильный телефон.Я думаю, что способ, которым я создаю части, имеет много накладных расходов, и мне было интересно, есть ли рекомендуемый способ сделать это.

Первое, что я делаю, это беру полный образ головоломки и создаю Mesh объект для отображения только нужного мне квадратного куска.

Затем я применяю BitmapMask в форме куска головоломки.

Затем добавляю еще два изображения.
1:Тень.
2: рельефные края.

Это добавляет 4 изображения для каждой части головоломки!

Перетаскивание применяется к маске и обновляет все позиции каждого изображения.Он отлично работает на моем компьютере, но страдает на мобильном телефоне.

Кусочки головоломки, тиснения и изображения теней находятся в текстурном атласе.

Вот мой код для создания сетки. 

this.puzzlePieceMask = this.scene.make.mesh({
  key: 'puzzleImage',
  x: 0,
  y: 0,
  vertices: [
    // x, y -> triangles counter clockwise from upper left corner (- values are up)
    -(puzzleInfo.widthOfPuzzleImage / 2 + puzzleInfo.margin),  -(puzzleInfo.heightOfPuzzleImage / 2 + puzzleInfo.margin), // 0,0
    -(puzzleInfo.widthOfPuzzleImage / 2 + puzzleInfo.margin),  puzzleInfo.heightOfPuzzleImage / 2 + puzzleInfo.margin, // 0,1
    puzzleInfo.widthOfPuzzleImage / 2 + puzzleInfo.margin, puzzleInfo.heightOfPuzzleImage / 2 + puzzleInfo.margin, // 1,1

    -(puzzleInfo.widthOfPuzzleImage / 2 + puzzleInfo.margin),  -(puzzleInfo.heightOfPuzzleImage / 2 + puzzleInfo.margin), // 0,0
    puzzleInfo.widthOfPuzzleImage / 2 + puzzleInfo.margin, puzzleInfo.heightOfPuzzleImage / 2 + puzzleInfo.margin, // 1,1
    puzzleInfo.widthOfPuzzleImage / 2 + puzzleInfo.margin, -(puzzleInfo.heightOfPuzzleImage / 2 + puzzleInfo.margin) // 1,0
  ],

  uv: [
    xPositionPercentage, yPositionPercentage, // upper left 0,0
    xPositionPercentage, yPositionPercentage + heightPercentage,// lower left 0,1
    xPositionPercentage + widthPercentage, yPositionPercentage + heightPercentage, // lower right 1,1

    xPositionPercentage, yPositionPercentage, // upper left 0,0
    xPositionPercentage + widthPercentage, yPositionPercentage + heightPercentage, // lower right 1,1
    xPositionPercentage + widthPercentage, yPositionPercentage, // upper right 1,0
  ]
});

Затем моя головоломка. Кусок и маска: 

  this.puzzlePieceMask = this.scene.add.image(0, 0, 'pieces', 'mask' + pieceNumber).setInteractive({ pixelPerfect: true, draggable: true });

this.puzzleImage.mask = new Phaser.Display.Masks.BitmapMask(this.scene, this.puzzlePieceMask);

Вот мой код перетаскивания: 

this.scene.input.on('drag', function (pointer, object, dragX, dragY) {
  if (this.dragGroup.length == 0) {
    return;
  }

  let deltaX = pointer.x - this.lastPosition.x
  let deltaY = pointer.y - this.lastPosition.y

  this.dragGroup.forEach( function(piece) {
    piece.dragged(deltaX, deltaY)
  })

  this.lastPosition = {x: pointer.x, y: pointer.y};
}.bind(this));

И drag(), который обновляет каждую часть головоломки, которая подключается приперетаскивание. 

dragged(deltaX, deltaY) {
this.puzzleImage.x += deltaX;
this.puzzleImage.y += deltaY;
this.puzzlePieceMask.x += deltaX;
this.puzzlePieceMask.y += deltaY;
this.emboss.x += deltaX;
this.emboss.y += deltaY;
this.shadow.x += deltaX;
this.shadow.y += deltaY;

}

Довольно много кода и много движущихся частей.
Я очень ценю вашу помощь и вклад!Заранее спасибо !!

...