Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


A floating text effect UI component for 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


A floating text plugin for Phaser, with many effects to choose from







No releases published


No packages published