时间戳

首页 > 解决方案 > Phaser 3 文本反转裁剪框

canvas - Phaser 3 文本反转裁剪框

问题描述

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

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

标签： canvasphaser-framework

解决方案

显然我可以使用 aPhaser.Display.Masks.GeometryMask来达到预期的效果。不幸的是，Phaser 3 不支持容器子级上的遮罩，但只要Text对象不是容器的直接子级，遮罩就会隐藏 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)

推荐阅读