Question

我正在尝试在Phaser 3中创建一个Text对象，您可以交互地上下滚动它，但是在寻找一些支持该功能的功能时遇到了麻烦。我了解我可以使用Text.setCrop(...)裁剪文本的顶部，但这仅够裁剪文本对象的顶部或底部，而不能裁剪全部。我需要的功能是可以在Text对象上设置多个裁剪框，也可以是一种“倒置”裁剪框，该框可以让我仅渲染框内的内容并隐藏其余内容。

有人知道一个技巧或可以让我做到这一点的东西吗？我不能为此使用BitmapText或Sprite对象，它必须是Text对象。

Answer 1

显然，我可以使用Phaser.Display.Masks.GeometryMask来达到所需的效果。不幸的是，Phaser 3不支持容器子级上的掩码，但是只要Text对象不是容器的直接子级，掩码将在文本的顶部和底部同时隐藏溢出内容：

/**
 * Unfortunately because of the container child masking issue in Phaser 3,
 * we cannot add the content directly as a child of the container.
 * Thus if the container mutates, we will need to manually mutate the content (and mask) along with it.
 * For more info refer to: https://github.com/photonstorm/phaser/issues/3673
 */
let x = 100
let y = 100
container = scene.add.container(x, y)
container.content = container.scene.add.text(
  container.x - container.width / 2, 
  container.y - container.height / 2,
  "", container.defaultStyles
)
this.content.setOrigin(0, 0)

// set up a mask on the content
// this will hide overflow text when we scroll
let maskShape = scene.add.graphics(container.x, container.y)

maskShape
  .clear()
  .fillStyle(0x000000, 0)
  .fillRect(
    container.x - container.width / 2, 
    container.y - container.height / 2,
    container.width, container.height
  )
let mask = container.createGeometryMask(maskShape)
container.content.setMask(mask)

移相器3文本倒置作物框

1 个答案: