Phaser 3 文本反转裁剪框答案

【问题标题】：Phaser 3 Text Inverted Crop BoxPhaser 3 文本反转裁剪框
【发布时间】：2019-04-18 15:18:22
【问题描述】：

我正在尝试在 Phaser 3 中创建一个 Text 对象，您可以交互地上下滚动，但我无法找到一些支持此功能的功能。我知道我可以使用 Text.setCrop(...) 裁剪文本的顶部，但这仅足以裁剪文本对象的顶部或底部，而不是两者。我需要的是能够在 Text 对象上设置多个裁剪框，或者一种“倒置”裁剪框，它允许我只渲染框内的内容并隐藏其余部分。

任何人知道一个技巧或什么可以让我这样做吗？我不能为此使用BitmapText 或Sprite 对象，它必须是Text 对象。

【问题讨论】：

没有代码我不确定我是否理解你想要做什么。听起来您只需要在文本框上方/下方添加一个矩形，然后就可以在其下方移动文本？
@JamesSkemp 很抱歉缺少上下文，我想出了答案并在下面添加了一些细节

标签： canvas phaser-framework

【解决方案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)

【讨论】：