├── LICENSE
├── README.md
├── assets
    ├── char.json
    ├── char.png
    ├── coins.json
    ├── coins.png
    ├── emptyBtn.png
    └── mine.png
├── core.js
├── floatingText.js
├── floatingText.min.js
├── index.html
└── phaser.min.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Michael Dobekidis
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Phaser-FloatingText
 3 | A floating text effect UI component for Phaser.io Javascript library
 4 | 
 5 | ## New Phaser Floating text v3 plugin! [grab it here](https://github.com/netgfx/FloatingNumbersPlugin)
 6 | 
 7 | <h3>Run the floating text effect from anywhere</h3>
 8 | 
 9 | ```javascript
10 | new FloatingText(this, {
11 |     text: "Hello Phaser!",
12 |     animation: "explode",
13 |     textOptions: {
14 |         fontSize: 32,
15 |         fill: "#ff18aa"
16 |     },
17 |     x: 100,
18 |     y: 100,
19 |     timeToLive: 400 // ms
20 | });
21 | ```
22 | pass necesery options like: this or game (the state that the floating text will be created within), and the customization options
23 | 
24 | <hr>
25 | 
26 | <img src="https://netgfx.com/trunk/randomPICS/ezgif.com-3ca0540923_zpsjqrkmldq.gif"/>
27 | 
28 | <strong>View example: <a href="http://www.netgfx.com/trunk/games/tools/phaser-floatingtext">Complete example</a></strong>
29 | 
30 |   <hr>
31 | 
32 | <strong>Game Instance</strong>
33 | The game state that we want the floating text to appear to, such as "game"
34 | 
35 | <strong>General Options:</strong>
36 | 
37 | <ul>
38 |     <li><strong>text:</strong> The information inside the floating text, can be String, Number</li>
39 |     <li><strong>width:</strong> The width of the floating text (default: auto)</li>
40 |   <li><strong>height:</strong> The height of the floating text (default: auto)</li>
41 |   <li><strong>x</strong> The x position of the floating text (default: auto based on alignment)</li>
42 |   <li><strong>rotation</strong> The amount of degrees to rotate the floating item (default: 0)</li>
43 |     <li><strong>y</strong> The y position of the floating text (default: auto based on alignment)</li>
44 |     <li><strong>parentObject</strong> The parent object that the floating text will appear at (default: null)</li>
45 |     <li><strong>animation: </strong> The animation effect (default: up, options:explode, smoke, custom, directional: up, down, left, right, fade, physics)</li>
46 |     <li><strong>textStyle: </strong> Declares styles for the simple text element (default: {
47 |             fontSize: 12,
48 |             fill: "#ffffff",
49 |             stroke: "#1e1e1e",
50 |             strokeThickness: 1,
51 |             wordWrap: true,
52 |             wordWrapWidth: 200
53 |         }</li>
54 |     <li><strong>fixedToCamera: </strong> Pins the floating text on the camera and moves with it (x,y are now camera offset) (default: false)</li>
55 |     <li><strong>sprite</strong> Add a Sprite instead of a text to float (default: null)</li>
56 |     <li><strong>spriteAnimationName</strong> If using an animation on the sprite, the name of the animation (default:"")</li>
57 |     <li><strong>spriteAnimationFrames</strong> If using an animation on the sprite, the animation frames (default:[])</li>
58 |     <li><strong>spriteAnimationFrameRate</strong> If using an animation on the sprite, the animation frame rate (default: 24)</li>
59 |     <li><strong>spriteAnimationRepeat</strong> If using an animation on the sprite, if the animation should loop (default: true)</li>
60 |     <li><strong>spriteAnchor</strong> The anchor to use on the sprite</li>
61 |     <li><strong>hasBackground</strong> A rounded rectangle behind the text (note: doesn't play well with explode)</li>
62 |     <li><strong>backgroundColor: </strong> The color of the rounded rectangle background (default: 0x000000)</li>
63 |     <li><strong>distance</strong> The distance for the floating item to move (default: 40)</li>
64 |     <li><strong>easing</strong> The easing function to use for animation (default: Phaser.Easing.Quintic.Out)</li>
65 |     <li><strong>timeToLive</strong> How much time (in ms) for the floating item to disapear (default: 600)</li>
66 |     <li><strong>customPath</strong> The custom path to use with bezier tweening, should be in the form of [{x:10, y:10},{x:20,y:20}] (default: [])</li>
67 |     <li><strong>align</strong> Where to align the floating item, options: "left, right, center" (default: "center")</li>
68 | </ul>
69 | 
70 | ### Documentation is incomplete.
71 | 
72 | <strong>API Functions</strong>
73 | 
74 | <ul>
75 |     <li><strong>showFloatingText</strong> Reveals the specific flowing text</li>
76 |     <li><strong>hideFloatingText: </strong> Hides the specific flowing text</li>
77 | </ul>
78 | 
79 | <i>
80 | </i>
81 | 
82 | <hr>
83 | 
84 | <strong>Buy me a coffee or tea!</strong> <br>
85 | <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=JCFPKZJ7Y23JJ&lc=GR&item_name=NetGfx%2ecom&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted"><img src="https://www.paypalobjects.com/webstatic/en_US/btn/btn_donate_92x26.png"/></a>
86 | 
87 | 
88 | <hr>
89 | 
90 | >The TODO list is diminising!
91 | 
92 | >Please let me know if you come across some bug or have something to contribute
93 | 


--------------------------------------------------------------------------------
/assets/char.json:
--------------------------------------------------------------------------------
 1 | {"frames": {
 2 | 
 3 | "SlimeMonster01":
 4 | {
 5 | 	"frame": {"x":1,"y":1,"w":274,"h":206},
 6 | 	"rotated": false,
 7 | 	"trimmed": false,
 8 | 	"spriteSourceSize": {"x":0,"y":0,"w":274,"h":206},
 9 | 	"sourceSize": {"w":274,"h":206}
10 | },
11 | "SlimeMonster02":
12 | {
13 | 	"frame": {"x":277,"y":1,"w":282,"h":202},
14 | 	"rotated": false,
15 | 	"trimmed": false,
16 | 	"spriteSourceSize": {"x":0,"y":0,"w":282,"h":202},
17 | 	"sourceSize": {"w":282,"h":202}
18 | }},
19 | "meta": {
20 | 	"app": "http://www.codeandweb.com/texturepacker",
21 | 	"version": "1.0",
22 | 	"image": "char.png",
23 | 	"format": "RGBA8888",
24 | 	"size": {"w":560,"h":208},
25 | 	"scale": "1",
26 | 	"smartupdate": "$TexturePacker:SmartUpdate:4b686f85b40dcb55bcbd8c1e6b499b76:21dc989722caa1fdbdcfb8c766f259ef:e951557f161ea273eed4923d8dab8014$"
27 | }
28 | }
29 | 


--------------------------------------------------------------------------------
/assets/char.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netgfx/Phaser-FloatingText/15a13b78e55902ae524471957ee7cdcb52d587b1/assets/char.png


--------------------------------------------------------------------------------
/assets/coins.json:
--------------------------------------------------------------------------------
 1 | {"frames": {
 2 | 
 3 | "Coins-1":
 4 | {
 5 | 	"frame": {"x":2,"y":2,"w":50,"h":50},
 6 | 	"rotated": false,
 7 | 	"trimmed": false,
 8 | 	"spriteSourceSize": {"x":0,"y":0,"w":50,"h":50},
 9 | 	"sourceSize": {"w":50,"h":50}
10 | },
11 | "Coins-2":
12 | {
13 | 	"frame": {"x":106,"y":2,"w":43,"h":50},
14 | 	"rotated": false,
15 | 	"trimmed": false,
16 | 	"spriteSourceSize": {"x":0,"y":0,"w":43,"h":50},
17 | 	"sourceSize": {"w":43,"h":50}
18 | },
19 | "Coins-3":
20 | {
21 | 	"frame": {"x":195,"y":2,"w":29,"h":50},
22 | 	"rotated": false,
23 | 	"trimmed": false,
24 | 	"spriteSourceSize": {"x":0,"y":0,"w":29,"h":50},
25 | 	"sourceSize": {"w":29,"h":50}
26 | },
27 | "Coins-4":
28 | {
29 | 	"frame": {"x":256,"y":2,"w":9,"h":50},
30 | 	"rotated": false,
31 | 	"trimmed": false,
32 | 	"spriteSourceSize": {"x":0,"y":0,"w":9,"h":50},
33 | 	"sourceSize": {"w":9,"h":50}
34 | },
35 | "Coins-5":
36 | {
37 | 	"frame": {"x":226,"y":2,"w":28,"h":50},
38 | 	"rotated": false,
39 | 	"trimmed": false,
40 | 	"spriteSourceSize": {"x":0,"y":0,"w":28,"h":50},
41 | 	"sourceSize": {"w":28,"h":50}
42 | },
43 | "Coins-6":
44 | {
45 | 	"frame": {"x":151,"y":2,"w":42,"h":50},
46 | 	"rotated": false,
47 | 	"trimmed": false,
48 | 	"spriteSourceSize": {"x":0,"y":0,"w":42,"h":50},
49 | 	"sourceSize": {"w":42,"h":50}
50 | },
51 | "Coins-7":
52 | {
53 | 	"frame": {"x":54,"y":2,"w":50,"h":50},
54 | 	"rotated": false,
55 | 	"trimmed": false,
56 | 	"spriteSourceSize": {"x":0,"y":0,"w":50,"h":50},
57 | 	"sourceSize": {"w":50,"h":50}
58 | }},
59 | "meta": {
60 | 	"app": "http://www.codeandweb.com/texturepacker",
61 | 	"version": "1.0",
62 | 	"image": "coins.png",
63 | 	"format": "RGBA8888",
64 | 	"size": {"w":267,"h":54},
65 | 	"scale": "1",
66 | 	"smartupdate": "$TexturePacker:SmartUpdate:8b86fe3946da1c62bed4b357cbd5d8a9:802ba84fbe9c322ce0b141f1b2461a7c:51f960d29b2cb2ae0010061540f14fb7$"
67 | }
68 | }
69 | 


--------------------------------------------------------------------------------
/assets/coins.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netgfx/Phaser-FloatingText/15a13b78e55902ae524471957ee7cdcb52d587b1/assets/coins.png


--------------------------------------------------------------------------------
/assets/emptyBtn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netgfx/Phaser-FloatingText/15a13b78e55902ae524471957ee7cdcb52d587b1/assets/emptyBtn.png


--------------------------------------------------------------------------------
/assets/mine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netgfx/Phaser-FloatingText/15a13b78e55902ae524471957ee7cdcb52d587b1/assets/mine.png


--------------------------------------------------------------------------------
/core.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netgfx/Phaser-FloatingText/15a13b78e55902ae524471957ee7cdcb52d587b1/core.js


--------------------------------------------------------------------------------
/floatingText.js:
--------------------------------------------------------------------------------
  1 | var FloatingText = function(state, options) {
  2 | 
  3 |     var _obj = {};
  4 |     var floatingTextGroup = state.add.group();
  5 |     var mainFloatingTextPool;
  6 |     var easings = [
  7 |         Phaser.Easing.Cubic.InOut,
  8 |         Phaser.Easing.Sinusoidal.In,
  9 |         Phaser.Easing.Quadratic.InOut,
 10 |         Phaser.Easing.Quartic.Out,
 11 |         Phaser.Easing.Linear,
 12 |         Phaser.Easing.Cubic.In,
 13 |         Phaser.Easing.Quintic.Out,
 14 |         Phaser.Easing.Quintic.InOut
 15 |     ];
 16 | 
 17 |     function createFloatingText(store) {
 18 |         var _text = options.text || "";
 19 |         var _textOptions = options.textOptions || {
 20 |             fontSize: 12,
 21 |             fill: "#ffffff",
 22 |             stroke: "#1e1e1e",
 23 |             strokeThickness: 1,
 24 |             wordWrap: true,
 25 |             wordWrapWidth: 200
 26 |         };
 27 |         var _sprite = options.sprite || null;
 28 |         var _spriteAnimationName = options.spriteAnimationName || "";
 29 |         var _spriteAnimationFrames = options.spriteAnimationFrames || [];
 30 |         var _spriteAnimationFrameRate = options.spriteAnimationFrameRate || 24;
 31 |         var _spriteAnimationRepeat = options.spriteAnimationRepeat || true;
 32 |         var _spritePlayAnimationOnStart = options.playAnimationOnStart || true;
 33 |         var _spriteAnchor = options.spriteAnchor || 0.5;
 34 |         var _x = options.x || "auto";
 35 |         var _y = options.y || "auto";
 36 |         var _rotation = options.rotation || false;
 37 |         var _parentObj = options.parentObj || null;
 38 |         var _width = options.width || "auto";
 39 |         var _height = options.height || "auto";
 40 |         var _hasBackground = options.hasBackground || false;
 41 |         var _backgroundColor = options.backgroundColor || 0x000000;
 42 |         var _animation = options.animation || "explode"; // explode, smoke, custom, directional: up, down, left, right, fade, physics
 43 |         var _distance = options.distance || 40;
 44 |         var _easing = options.easing || Phaser.Easing.Quintic.Out;
 45 |         var _timeToLive = options.timeToLive || 600; // in ms
 46 |         var _fixedToCamera = options.fixedToCamera || false;
 47 |         var _align = options.align || "center";
 48 |         var _customPath = options.customPath || [];
 49 | 
 50 |         // create the element
 51 |         if (_sprite === null) {
 52 |             _obj = state.add.text(0, 0, _text, _textOptions);
 53 |             //_obj.anchor.setTo(_spriteAnchor);
 54 |         } else {
 55 |             _obj = state.add.sprite(_sprite.x, _sprite.y, _sprite.key, _spriteAnimationFrames[0]);
 56 |             _obj.anchor.setTo(_spriteAnchor);
 57 |             _obj.animations.add(_spriteAnimationName, _spriteAnimationFrames, _spriteAnimationFrameRate, _spriteAnimationRepeat, true);
 58 |         }
 59 | 
 60 |         if (_rotation !== false) {
 61 |             _obj.angle = _rotation;
 62 |         }
 63 | 
 64 |         if (_parentObj !== null && _parentObj !== undefined) {
 65 |             if (_x === "auto") {
 66 |                 if (_parentObj.anchor === 0) {
 67 |                     _obj.x = _parentObj.x + _parentObj.width / 2 - _obj.width / 2;
 68 |                 } else {
 69 |                     _obj.x = _parentObj.x - _obj.width / 2;
 70 |                 }
 71 |             } else {
 72 |                 _obj.x = _x;
 73 |             }
 74 | 
 75 |             if (_y === "auto") {
 76 |                 if (_parentObj.anchor === 0) {
 77 |                     _obj.y = _parentObj.y + _parentObj.height / 2 - _obj.height / 2;
 78 |                 } else {
 79 |                     _obj.y = _parentObj.y - _obj.height / 2;
 80 |                 }
 81 |             } else {
 82 |                 _obj.y = _y;
 83 |             }
 84 |         } else {
 85 |             if (_align === "center") {
 86 |                 if (_sprite !== null) {
 87 |                     _obj.x = _x - _obj.width * _spriteAnchor / 2;
 88 |                     _obj.y = _y - _obj.height * _spriteAnchor / 2;
 89 |                 } else {
 90 |                     _obj.x = _x - _obj.width / 2;
 91 |                     _obj.y = _y - _obj.height / 2;
 92 |                 }
 93 |             } else if (_align === "left") {
 94 |                 _obj.x = _x;
 95 |                 _obj.y = _y;
 96 |             } else if (_align === "right") {
 97 |                 _obj.x = _x + _obj.width;
 98 |                 _obj.y = _y + _obj.height;
 99 |             } else if (_align === "none") {
100 |                 _obj.x = _x;
101 |                 _obj.y = _y;
102 |             }
103 |         }
104 | 
105 |         var modal;
106 |         if (_hasBackground === true) {
107 |             modal = state.add.graphics(_obj.width + 10, _obj.height);
108 |             modal.beginFill(_backgroundColor, 1);
109 |             //modal.x = _obj.x - 5;
110 |             //modal.y = _obj.y - 5;
111 |             floatingTextGroup.width = _obj.width + 5;
112 |             floatingTextGroup.height = _obj.width + 5;
113 |             modal.drawRoundedRect(0, 0, _obj.width + 10, _obj.height, 6);
114 |             modal.endFill();
115 |             floatingTextGroup.add(modal);
116 |         } else {
117 |             floatingTextGroup.width = _obj.width;
118 |             floatingTextGroup.height = _obj.height;
119 |         }
120 | 
121 |         if (_fixedToCamera === true) {
122 |             floatingTextGroup.fixedToCamera = true;
123 |         }
124 | 
125 |         floatingTextGroup.x = _obj.x;
126 |         floatingTextGroup.y = _obj.y;
127 |         _obj.x = 0;
128 |         _obj.y = 0;
129 |         if (modal !== undefined) {
130 |             modal.x = -5;
131 |             modal.y = 0;
132 |         }
133 |         _obj._animation = _animation;
134 |         _obj._easing = _easing;
135 |         _obj._timeToLive = _timeToLive;
136 |         _obj._distance = _distance;
137 |         _obj._customPath = _customPath;
138 |         _obj._spriteAnimationName = _spriteAnimationName;
139 |         _obj._sprite = _sprite;
140 |         floatingTextGroup.add(_obj);
141 |         floatingTextGroup.visible = false;
142 | 
143 |         if (store !== true) {
144 |             animateFloatingText();
145 |         } else {
146 |             return floatingTextGroup;
147 |         }
148 |     }
149 | 
150 |     function animateFloatingText() {
151 | 
152 |         var type = _obj._animation;
153 |         var tweenObj;
154 |         var pointsX = [];
155 |         var pointsY = [];
156 |         var startX;
157 |         var startY;
158 |         var side;
159 |         floatingTextGroup.visible = true;
160 |         if (_obj._sprite !== null) {
161 |             _obj.animations.play(_obj._spriteAnimationName);
162 |         }
163 | 
164 |         if (type === "physics") {
165 |             startX = floatingTextGroup.x;
166 |             startY = floatingTextGroup.y;
167 |             side = state.rnd.integerInRange(0, 10);
168 |             var firstBezierPointX;
169 |             var firstBezierPointY;
170 |             var secondBezierPointX;
171 |             var secondBezierPointY;
172 |             var endX;
173 |             var endY;
174 | 
175 |             if (side > 5) {
176 |                 firstBezierPointX = floatingTextGroup.x + 25;
177 |                 firstBezierPointY = floatingTextGroup.y - 50;
178 |                 secondBezierPointX = floatingTextGroup.x + 50;
179 |                 secondBezierPointY = floatingTextGroup.y - 25;
180 |                 endX = floatingTextGroup.x + 100;
181 |                 endY = floatingTextGroup.y + 50;
182 |             } else {
183 |                 firstBezierPointX = floatingTextGroup.x - 25;
184 |                 firstBezierPointY = floatingTextGroup.y - 50;
185 |                 secondBezierPointX = floatingTextGroup.x - 50;
186 |                 secondBezierPointY = floatingTextGroup.y - 25;
187 |                 endX = floatingTextGroup.x - 100;
188 |                 endY = floatingTextGroup.y + 50;
189 |             }
190 |             tweenObj = state.add.tween(floatingTextGroup).to({
191 |                 x: [startX, firstBezierPointX, secondBezierPointX, endX],
192 |                 y: [startY, firstBezierPointY, secondBezierPointY, endY],
193 |             }, _obj.timeToLive, Phaser.Easing.Circular.Out, true).interpolation(function(v, k) {
194 |                 return Phaser.Math.bezierInterpolation(v, k);
195 |             });
196 | 
197 |             tweenObj.onComplete.addOnce(function() {
198 |                 var _tweenObj = tweenProperty(this, "alpha", {
199 |                     alpha: 0
200 |                 }, 250, 0);
201 | 
202 |                 _tweenObj.onComplete.addOnce(function() {
203 |                     this.destroy();
204 |                 }, this);
205 |             }, floatingTextGroup);
206 | 
207 |         } else if (type === "custom") {
208 |             pointsX = [];
209 |             pointsY = [];
210 |             for (var i = 0; i < _obj._customPath.length; i++) {
211 |                 pointsX.push(_obj._customPath[i].x);
212 |                 pointsX.push(_obj._customPath[i].y);
213 |             }
214 | 
215 |             tweenObj = state.add.tween(floatingTextGroup).to({
216 |                 x: pointsX,
217 |                 y: pointsY,
218 |             }, _obj.timeToLive, Phaser.Easing.Circular.Out, true).interpolation(function(v, k) {
219 |                 return Phaser.Math.bezierInterpolation(v, k);
220 |             });
221 | 
222 |             tweenObj.onComplete.addOnce(function() {
223 |                 var _tweenObj = tweenProperty(this, "alpha", {
224 |                     alpha: 0
225 |                 }, 250, 0);
226 | 
227 |                 _tweenObj.onComplete.addOnce(function() {
228 |                     this.destroy();
229 |                 }, this);
230 |             }, floatingTextGroup);
231 |         } else if (type === "explode") {
232 |             floatingTextGroup.pivot.setTo(0.5, 0.5);
233 | 
234 |             var textObj = floatingTextGroup.children[floatingTextGroup.children.length - 1];
235 |             tweenObj = tweenProperty(textObj, "size", { fontSize: textObj.fontSize * 2 }, 250, 0, Phaser.Easing.Back.Out);
236 | 
237 |             var scaleX = textObj.width * 2 - textObj.width;
238 |             var scaleY = textObj.height * 2 - textObj.height;
239 |             tweenProperty(floatingTextGroup.position, "position", { x: floatingTextGroup.position.x - scaleX / 2, y: floatingTextGroup.position.y - scaleY / 2 }, 250, 0, Phaser.Easing.Back.Out);
240 | 
241 | 
242 |             tweenObj.onComplete.addOnce(function() {
243 |                 var _tweenObj = tweenProperty(this, "alpha", {
244 |                     alpha: 0
245 |                 }, 250, _obj._timeToLive);
246 | 
247 |                 _tweenObj.onComplete.addOnce(function() {
248 |                     this.destroy();
249 |                 }, this);
250 |             }, floatingTextGroup);
251 |         } else if (type === "smoke") {
252 |             startX = floatingTextGroup.x;
253 |             startY = floatingTextGroup.y;
254 |             side = state.rnd.integerInRange(0, 10);
255 | 
256 |             var pivot = 0;
257 |             for (var j = 0; j < 12; j++) {
258 |                 if (pivot < 3 && pivot > 0) {
259 |                     pointsX.push(startX + (10 * Math.abs(pivot)));
260 |                     pointsY.push(startY - (_obj._distance / 12 * j));
261 |                     pivot += 1;
262 |                 } else if (pivot === 3) {
263 |                     pivot = 0;
264 |                     pointsX.push(startX - (10 * Math.abs(pivot)));
265 |                     pointsY.push(startY - (_obj._distance / 12 * j));
266 |                     pivot -= 1;
267 |                 } else if (pivot === -3) {
268 |                     pivot = 0;
269 |                     pointsX.push(startX - (10 * Math.abs(pivot)));
270 |                     pointsY.push(startY - (_obj._distance / 12 * j));
271 |                     pivot += 1;
272 |                 } else if (pivot > -3) {
273 |                     pointsX.push(startX - (10 * Math.abs(pivot)));
274 |                     pointsY.push(startY - (_obj._distance / 12 * j));
275 |                     pivot -= 1;
276 |                 }
277 |             }
278 | 
279 |             tweenObj = state.add.tween(floatingTextGroup).to({
280 |                 x: pointsX,
281 |                 y: pointsY,
282 |             }, _obj.timeToLive, Phaser.Easing.Circular.Out, true).interpolation(function(v, k) {
283 |                 return Phaser.Math.bezierInterpolation(v, k);
284 |             });
285 | 
286 |             tweenObj.onComplete.addOnce(function() {
287 |                 var _tweenObj = tweenProperty(this, "alpha", {
288 |                     alpha: 0
289 |                 }, 250, 0);
290 | 
291 |                 _tweenObj.onComplete.addOnce(function() {
292 |                     this.destroy();
293 |                 }, this);
294 |             }, floatingTextGroup);
295 |         } else if (type === "up") {
296 |             tweenObj = tweenProperty(floatingTextGroup, "y", {
297 |                 y: floatingTextGroup.y - _obj._distance
298 |             }, 400, 100, _obj._easing);
299 | 
300 |             tweenObj.onComplete.addOnce(function() {
301 |                 var _tweenObj = tweenProperty(floatingTextGroup, "alpha", {
302 |                     alpha: 0
303 |                 }, 150, _obj._timeToLive);
304 | 
305 |                 _tweenObj.onComplete.addOnce(function() {
306 |                     this.removeAll(true);
307 |                     this.destroy();
308 |                 }, this);
309 |             }, floatingTextGroup);
310 |         } else if (type === "down") {
311 |             tweenObj = tweenProperty(floatingTextGroup, "y", {
312 |                 y: floatingTextGroup.y + _obj._distance
313 |             }, 400, 100, _obj._easing);
314 | 
315 |             tweenObj.onComplete.addOnce(function() {
316 |                 var _tweenObj = tweenProperty(this, "alpha", {
317 |                     alpha: 0
318 |                 }, 250, _obj._timeToLive);
319 | 
320 |                 _tweenObj.onComplete.addOnce(function() {
321 |                     this.destroy();
322 |                 }, this);
323 |             }, floatingTextGroup);
324 |         } else if (type === "left") {
325 |             tweenObj = tweenProperty(floatingTextGroup, "y", {
326 |                 y: floatingTextGroup.x - _obj._distance
327 |             }, 400, 100, _obj._easing);
328 | 
329 |             tweenObj.onComplete.addOnce(function() {
330 |                 var _tweenObj = tweenProperty(this, "alpha", {
331 |                     alpha: 0
332 |                 }, 250, _obj._timeToLive);
333 | 
334 |                 _tweenObj.onComplete.addOnce(function() {
335 |                     this.destroy();
336 |                 }, this);
337 |             }, floatingTextGroup);
338 |         } else if (type === "right") {
339 |             tweenObj = tweenProperty(floatingTextGroup, "y", {
340 |                 y: floatingTextGroup + _obj._distance
341 |             }, 400, 100, _obj._easing);
342 | 
343 |             tweenObj.onComplete.addOnce(function() {
344 |                 var _tweenObj = tweenProperty(this, "alpha", {
345 |                     alpha: 0
346 |                 }, 250, _obj._timeToLive);
347 | 
348 |                 _tweenObj.onComplete.addOnce(function() {
349 |                     this.destroy();
350 |                 }, this);
351 |             }, floatingTextGroup);
352 |         } else if (type === "fade") {
353 |             floatingTextGroup.alpha = 0;
354 |             tweenObj = tweenProperty(floatingTextGroup, "alpha", {
355 |                 alpha: 1
356 |             }, 250, 50, _obj._easing);
357 | 
358 |             tweenObj.onComplete.addOnce(function() {
359 |                 var _tweenObj = tweenProperty(this, "alpha", {
360 |                     alpha: 0
361 |                 }, 350, _obj._timeToLive);
362 | 
363 |                 _tweenObj.onComplete.addOnce(function() {
364 |                     this.destroy();
365 |                 }, this);
366 |             }, floatingTextGroup);
367 |         }
368 |     }
369 | 
370 |     function createPool() {
371 |         var numOfItems = options.numOfItems || 50;
372 |         mainFloatingTextPool = state.add.group();
373 |         for (var i = 0; i < numOfItems; i++) {
374 |             mainFloatingTextPool.add(createFloatingText(true));
375 |         }
376 |     }
377 | 
378 |     /**
379 |      * [tweenProperty description]
380 |      * @param  {[type]} item     [description]
381 |      * @param  {[type]} property [description]
382 |      * @param  {[type]} obj      [description]
383 |      * @param  {[type]} duration [description]
384 |      * @return {[type]}          [description]
385 |      */
386 |     function tweenProperty(item, property, obj, duration, delay, easing, yoyo, repeat, reverse) {
387 | 
388 |         delay = delay || {};
389 |         easing = easing || Phaser.Easing.Linear.None;
390 |         yoyo = yoyo || false;
391 |         repeat = repeat || 0;
392 | 
393 |         var tween = state.add.tween(item).to(obj, duration, easing, true, delay, repeat, yoyo);
394 |         tween.reverse = reverse || false;
395 |         return tween;
396 |     }
397 | 
398 |     if (options.numOfItems !== undefined) {
399 |         createPool();
400 |     } else {
401 |         createFloatingText();
402 |     }
403 | 
404 |     // TODO: add factory
405 | 
406 |     return {
407 |         showFloatingText: function() {
408 |             floatingTextGroup.visible = true;
409 |         },
410 |         hideFloatingText: function() {
411 |             floatingTextGroup.visible = false;
412 |         }
413 | 
414 |     };
415 | };


--------------------------------------------------------------------------------
/floatingText.min.js:
--------------------------------------------------------------------------------
1 | var FloatingText=function(a,b){function g(e){var f=b.text||"",g=b.textOptions||{fontSize:12,fill:"#ffffff",stroke:"#1e1e1e",strokeThickness:1,wordWrap:!0,wordWrapWidth:200},i=b.sprite||null,j=b.spriteAnimationName||"",k=b.spriteAnimationFrames||[],l=b.spriteAnimationFrameRate||24,m=b.spriteAnimationRepeat||!0,o=(b.playAnimationOnStart||!0,b.spriteAnchor||.5),p=b.x||"auto",q=b.y||"auto",r=b.rotation||!1,s=b.parentObj||null,v=(b.width||"auto",b.height||"auto",b.hasBackground||!1),w=b.backgroundColor||0,x=b.animation||"explode",y=b.distance||40,z=b.easing||Phaser.Easing.Quintic.Out,A=b.timeToLive||600,B=b.fixedToCamera||!1,C=b.align||"center",D=b.customPath||[];null===i?c=a.add.text(0,0,f,g):(c=a.add.sprite(i.x,i.y,i.key,k[0]),c.anchor.setTo(o),c.animations.add(j,k,l,m,!0)),r!==!1&&(c.angle=r),null!==s&&void 0!==s?("auto"===p?0===s.anchor?c.x=s.x+s.width/2-c.width/2:c.x=s.x-c.width/2:c.x=p,"auto"===q?0===s.anchor?c.y=s.y+s.height/2-c.height/2:c.y=s.y-c.height/2:c.y=q):"center"===C?null!==i?(c.x=p-c.width*o/2,c.y=q-c.height*o/2):(c.x=p-c.width/2,c.y=q-c.height/2):"left"===C?(c.x=p,c.y=q):"right"===C?(c.x=p+c.width,c.y=q+c.height):"none"===C&&(c.x=p,c.y=q);var E;return v===!0?(E=a.add.graphics(c.width+10,c.height),E.beginFill(w,1),d.width=c.width+5,d.height=c.width+5,E.drawRoundedRect(0,0,c.width+10,c.height,6),E.endFill(),d.add(E)):(d.width=c.width,d.height=c.height),B===!0&&(d.fixedToCamera=!0),d.x=c.x,d.y=c.y,c.x=0,c.y=0,void 0!==E&&(E.x=-5,E.y=0),c._animation=x,c._easing=z,c._timeToLive=A,c._distance=y,c._customPath=D,c._spriteAnimationName=j,c._sprite=i,d.add(c),d.visible=!1,e===!0?d:void h()}function h(){var b=c._animation;if(d.visible=!0,null!==c._sprite&&c.animations.play(c._spriteAnimationName),"physics"===b){var e=d.x,f=d.y,g=a.rnd.integerInRange(0,10);if(g>5)var h=d.x+25,i=d.y-50,k=d.x+50,l=d.y-25,m=d.x+100,n=d.y+50;else var h=d.x-25,i=d.y-50,k=d.x-50,l=d.y-25,m=d.x-100,n=d.y+50;var o=a.add.tween(d).to({x:[e,h,k,m],y:[f,i,l,n]},c.timeToLive,Phaser.Easing.Circular.Out,!0).interpolation(function(a,b){return Phaser.Math.bezierInterpolation(a,b)});o.onComplete.addOnce(function(){var a=j(this,"alpha",{alpha:0},250,0);a.onComplete.addOnce(function(){this.destroy()},this)},d)}else if("custom"===b){for(var p=[],q=[],r=0;r<c._customPath.length;r++)p.push(c._customPath[r].x),p.push(c._customPath[r].y);var o=a.add.tween(d).to({x:p,y:q},c.timeToLive,Phaser.Easing.Circular.Out,!0).interpolation(function(a,b){return Phaser.Math.bezierInterpolation(a,b)});o.onComplete.addOnce(function(){var a=j(this,"alpha",{alpha:0},250,0);a.onComplete.addOnce(function(){this.destroy()},this)},d)}else if("explode"===b){d.pivot.setTo(.5,.5);var s=d.children[d.children.length-1],o=j(s,"size",{fontSize:2*s.fontSize},250,0,Phaser.Easing.Back.Out),t=2*s.width-s.width,u=2*s.height-s.height;j(d.position,"position",{x:d.position.x-t/2,y:d.position.y-u/2},250,0,Phaser.Easing.Back.Out),o.onComplete.addOnce(function(){var a=j(this,"alpha",{alpha:0},250,c._timeToLive);a.onComplete.addOnce(function(){this.destroy()},this)},d)}else if("smoke"===b){for(var e=d.x,f=d.y,g=a.rnd.integerInRange(0,10),p=[],q=[],v=0,r=0;r<12;r++)v<3&&v>0?(p.push(e+10*Math.abs(v)),q.push(f-c._distance/12*r),v+=1):3===v?(v=0,p.push(e-10*Math.abs(v)),q.push(f-c._distance/12*r),v-=1):v===-3?(v=0,p.push(e-10*Math.abs(v)),q.push(f-c._distance/12*r),v+=1):v>-3&&(p.push(e-10*Math.abs(v)),q.push(f-c._distance/12*r),v-=1);var o=a.add.tween(d).to({x:p,y:q},c.timeToLive,Phaser.Easing.Circular.Out,!0).interpolation(function(a,b){return Phaser.Math.bezierInterpolation(a,b)});o.onComplete.addOnce(function(){var a=j(this,"alpha",{alpha:0},250,0);a.onComplete.addOnce(function(){this.destroy()},this)},d)}else if("up"===b){var o=j(d,"y",{y:d.y-c._distance},400,100,c._easing);o.onComplete.addOnce(function(){reg.floatingGroup=d;var a=j(d,"alpha",{alpha:0},150,c._timeToLive);a.onComplete.addOnce(function(){this.removeAll(!0),this.destroy()},this)},d)}else if("down"===b){var o=j(d,"y",{y:d.y+c._distance},400,100,c._easing);o.onComplete.addOnce(function(){var a=j(this,"alpha",{alpha:0},250,c._timeToLive);a.onComplete.addOnce(function(){this.destroy()},this)},d)}else if("left"===b){var o=j(d,"y",{y:d.x-c._distance},400,100,c._easing);o.onComplete.addOnce(function(){var a=j(this,"alpha",{alpha:0},250,c._timeToLive);a.onComplete.addOnce(function(){this.destroy()},this)},d)}else if("right"===b){var o=j(d,"y",{y:d+c._distance},400,100,c._easing);o.onComplete.addOnce(function(){var a=j(this,"alpha",{alpha:0},250,c._timeToLive);a.onComplete.addOnce(function(){this.destroy()},this)},d)}else if("fade"===b){d.alpha=0;var o=j(d,"alpha",{alpha:1},250,50,c._easing);o.onComplete.addOnce(function(){var a=j(this,"alpha",{alpha:0},350,c._timeToLive);a.onComplete.addOnce(function(){this.destroy()},this)},d)}}function i(){var c=b.numOfItems||50;e=a.add.group();for(var d=0;d<c;d++)e.add(g(!0))}function j(b,c,d,e,f,g,h,i,j){f=f||{},g=g||Phaser.Easing.Linear.None,h=h||!1,i=i||0;var k=a.add.tween(b).to(d,e,g,!0,f,i,h);return k.reverse=j||!1,k}var e,c={},d=a.add.group();[Phaser.Easing.Cubic.InOut,Phaser.Easing.Sinusoidal.In,Phaser.Easing.Quadratic.InOut,Phaser.Easing.Quartic.Out,Phaser.Easing.Linear,Phaser.Easing.Cubic.In,Phaser.Easing.Quintic.Out,Phaser.Easing.Quintic.InOut];return void 0!==b.numOfItems?i():g(),{showFloatingText:function(){d.visible=!0},hideFloatingText:function(){d.visible=!1}}};
2 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 
 6 |   <meta charset="UTF-8">
 7 | 
 8 |   <title>Phaser-FloatingText</title>
 9 | 
10 |   <link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
11 | 
12 |   <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Luckiest+Guy'>
13 | 
14 | </head>
15 | 
16 | <body>
17 | 
18 | 
19 | 
20 | <div style="font-family: Luckiest+Guy,cursive;visibility:hidden;opacity:0;position:fixed;"> &nbsp;</div>
21 |   <script src='phaser.min.js'></script>
22 |   <script src='http://netgfx.com/trunk/games/phaser_modals/modal.js'></script>
23 |   <script src="floatingText.js"></script>
24 |   <script src='core.js'></script>
25 | 
26 | 
27 | 
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------