Builds a TextBox

• background box with optional configurable fill
• border box with a configurable line border and no background fill
• background and border combined as text bounding box
• text element

Options

---

Property	State	Description
positionX	required	upper left corner x coordinate
positionY	required	upper left corner y coordinate
width	required	bounding box width
height	required	bounding box height
shouldFillBoxBackground	optional	undefined: use defaults for backgroundColor and backgroundAlpha, true if setting color/alpha, false no fill
backgroundColor	optional	numeric background color
backgroundAlpha	optional	background alpha value
textFont	optional	default Arial
textWeight	optional	default bold
textStatic	optional	default no text
textLineSpacing	optional	default -5
textFontSize	optional	default 24
textFontColor	optional	default 0x000000 (black)
shouldShowTrash	optional	default true, false to remove trash can
trashCanImage	optional	required if shouldShowTrash = true, image information for a sprite sheet entry - see ITrashCanImage
trashCanScale	optional	scaled on game.switch, game.height, default 0.05
trashCanColor	optional	default 0xCC0000
trashCanOnInputDown	optional	handler for onImputDown of trash can, default clears text for the instance

Usage

---

textBoxOptions = {
    positionX: value.positionX,
    positionY: value.positionY,
    width: value.width,
    height: value.height,
    lineWidth: 3,
    lineColor: 0x0000ff,
    textStatic: value.textStatic,
    textFontSize: value.textFontSize,
    textFontColor: 0x000000,
    shouldShowTrash: value.shouldShowTrash,
    trashCanImage: {
        sprite: "game",
        image: "trashCan"
    }
}
const textBox = new SZ.TextBox(this.game, textBoxOptions);

All properties are exposed using TypeScript Get/Set and can be accessed via

this.textBox.textFontColor = 0x0C0C0C;

const textColor = this.textBox.textFontColor;

The TextBox also exposes all the component Phaser objects so they can be discretely manipulated after creation of the TextBox object

this.textBox.boxInstance: Phaser.Sprite
this.textBox.borderInstance: Phaser.Sprite
this.textBox.textInstance: Phaser.Text
this.textBox.animation: Phaser.Tween

TextBox Animation

• this.textBox.animation (Phaser.Tween) is a delayed operation and must be overriden after the TextBox has been instantiated
• animation can be as simple or complex as desired and may include:
  • this.textBox.boxInstance
  • this.textBox.borderInstance
  • this.textBox.textInstance
• the TextBox.resume() method starts/resumes the animation
• the TextBox.pause() method pauses the animation and this.textBox.borderInstance alpha is set to 1.0
• the TextBox.destroy() method stops the animation

default animation: this.game.add.tween(this.borderInstance).to({ alpha: 0.2 }, 500, Phaser.Easing.Quadratic.InOut, false, 0, -1, true);

it is your responsibilty to clean up interrupted animations after a TextBox.pause(), only the borderInstance alpha is handled automatically and set back to its full alpha = 1.0

param

the Phaser.Game object

param

a JSON object for user configurable settings