Фазовая 3 Текстовая перевернутая рамка - PullRequest
Новая
       13

Фазовая 3 Текстовая перевернутая рамка

0 голосов
/ 15 ноября 2018

Я пытаюсь создать объект Text в Phaser 3, который вы можете прокручивать вверх и вниз в интерактивном режиме, и у меня возникают проблемы с поиском некоторых функций, которые будут поддерживать это. Я понимаю, что могу обрезать верх текста с помощью Text.setCrop(...), но этого будет достаточно только для обрезки либо верхней, либо нижней части текстового объекта, но не обоих. Что мне нужно, так это возможность установить несколько полей обрезки на объекте «Текст» или что-то вроде «перевернутого» поля обрезки, которое позволит мне визуализировать только то, что находится внутри блока, и скрыть остальное.

Кто-нибудь знает об уловке или о чем-то, что позволит мне это сделать? Я не могу использовать BitmapText или Sprite объект для этого, это должен быть Text объект.

1 Ответ

0 голосов
/ 17 ноября 2018

Очевидно, я могу использовать 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)
...