A floating text plugin for Phaser, with many effects to choose from
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
LICENSE
README.md
core.js
floatingText.js
floatingText.min.js
index.html
phaser.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