Phaser.Text Inverted Crop Box

[galarant]

I'm trying to create a text object that you can scroll up and down interactively, and I'm having trouble finding some functionality that will support this. I understand that I can crop the top of the text with Text.setCrop(...) but that will only suffice to crop either the top or the bottom of the text object, not both. What I need is the ability to either set multiple crop boxes on the Text object, or a sort of "inverted" crop box which will allow me to render only what's inside the box and hide the rest of it.

Anyone aware of a trick or something that will allow me to do this? I can't use BitmapText or a Sprite object for this, it has to be a Text object.

 

[prob]

You could use a Mask, as long as you're using WebGL.

[galarant]

Okay thanks I'll look into that! Sorry for the newb question, I assumed Masks were for something else.

[galarant]

Okay the masked worked!

I got bit by the current "no masks allowed on container children" limitation in Phaser 3, but if my Text object is not a child of a container then a rectangular GeometryMask acheives my desired effect:

/**
 * 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
)
container.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)