Phaser-FloatingText

A floating text effect UI component for Phaser.io Javascript library

New Phaser Floating text v3 plugin! grab it here

Run the floating text effect from anywhere

new FloatingText(this, {
    text: "Hello Phaser!",
    animation: "explode",
    textOptions: {
        fontSize: 32,
        fill: "#ff18aa"
    },
    x: 100,
    y: 100,
    timeToLive: 400 // ms
});

pass necesery options like: this or game (the state that the floating text will be created within), and the customization options

---

View example: Complete example

---

Game Instance The game state that we want the floating text to appear to, such as "game"

General Options:

• text: The information inside the floating text, can be String, Number
• width: The width of the floating text (default: auto)
• height: The height of the floating text (default: auto)
• x The x position of the floating text (default: auto based on alignment)
• rotation The amount of degrees to rotate the floating item (default: 0)
• y The y position of the floating text (default: auto based on alignment)
• parentObject The parent object that the floating text will appear at (default: null)
• animation: The animation effect (default: up, options:explode, smoke, custom, directional: up, down, left, right, fade, physics)
• textStyle: Declares styles for the simple text element (default: { fontSize: 12, fill: "#ffffff", stroke: "#1e1e1e", strokeThickness: 1, wordWrap: true, wordWrapWidth: 200 }
• fixedToCamera: Pins the floating text on the camera and moves with it (x,y are now camera offset) (default: false)
• sprite Add a Sprite instead of a text to float (default: null)
• spriteAnimationName If using an animation on the sprite, the name of the animation (default:"")
• spriteAnimationFrames If using an animation on the sprite, the animation frames (default:[])
• spriteAnimationFrameRate If using an animation on the sprite, the animation frame rate (default: 24)
• spriteAnimationRepeat If using an animation on the sprite, if the animation should loop (default: true)
• spriteAnchor The anchor to use on the sprite
• hasBackground A rounded rectangle behind the text (note: doesn't play well with explode)
• backgroundColor: The color of the rounded rectangle background (default: 0x000000)
• distance The distance for the floating item to move (default: 40)
• easing The easing function to use for animation (default: Phaser.Easing.Quintic.Out)
• timeToLive How much time (in ms) for the floating item to disapear (default: 600)
• customPath The custom path to use with bezier tweening, should be in the form of [{x:10, y:10},{x:20,y:20}] (default: [])
• align Where to align the floating item, options: "left, right, center" (default: "center")

Documentation is incomplete.

API Functions

• showFloatingText Reveals the specific flowing text
• hideFloatingText: Hides the specific flowing text

---

Buy me a coffee or tea!

---

The TODO list is diminising!

Please let me know if you come across some bug or have something to contribute