A floating text plugin for Phaser, with many effects to choose from
JavaScript HTML
Latest commit c093a13 Jan 17, 2017 @netgfx committed on GitHub Update floatingText.min.js

README.md

Phaser-FloatingText

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

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