https://github.com/netgfx/Phaser-FloatingText

A floating text plugin for Phaser, with many effects to choose from
https://github.com/netgfx/Phaser-FloatingText

Last synced: 7 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/netgfx/Phaser-FloatingText
• Owner: netgfx
• License: mit
• Created: 2017-01-05T10:59:57.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-07-20T16:47:32.000Z (almost 6 years ago)
• Last Synced: 2025-08-17T04:33:36.824Z (10 months ago)
• Language: JavaScript
• Size: 294 KB
• Stars: 49
• Watchers: 3
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-phaser - Floating Text - A floating text plugin for Phaser, with many effects to choose from (Uncategorized / Uncategorized)

README

          

# Phaser-FloatingText

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

## New Phaser Floating text v3 plugin! [grab it here](https://github.com/netgfx/FloatingNumbersPlugin)

Run the floating text effect from anywhere


```javascript

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