Question

我正在使用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;

}

相当多的代码和很多动人的作品。
非常感谢您的帮助和投入！在此先感谢！

移相器3拼图锯拼图

0 个答案: